Multi click on a submit button

Multi click on a submit button

  
Hello community!

I have a submit button on a popup and sometimes users click multiple times.
I would like to avoid this.
After the first click I tried to disable this button with javascript. And I did it. The problem is: when I add the javascript the destination action doesn't trigger anymore.
I don't want to use AJAX.

How can I solve this problem?

I added an expression with this value:

"<script>osjs('#" + ButtonFeedback.Id + "').click(function(){osjs('#" + ButtonFeedback.Id + "')[0].disabled=true;})</script>"
Hi Ricardo,

An option you could try would be to create a local variable (e.g. ButtonWasClicked), set the Enabled property of the button to Not ButtonWasClicked.


Then the first thing you would do on the screeen action was to check if the variable was true and if so exit. Otherwise set the value to True, refresh the button, and do what you need to do:



An even simpler solution (if feasible) would be to set the button method to Submit.

Cheers,
Tiago Simões
But how to do that on client side?
Try this:

http://www.outsystems.com/forge/component/670/prevent-spam-clicks/
Yes i saw that component but what i see by the code javascript i am not sure it will prevent on submit button. I think it is for ajax situations
Filipe -

Just stick a line or two of jQuery on the screen that disabled the button once it has been clicked.

J.Ja

Hi people!


Using server side solutions, like setting variables and refreshing buttons, might not do the trick. Succesfully preventing a double-click is usually attainable only using javascript. 

The funny thing is, I have come across many people suggesting this, but they don't tell you exactly how to do it. To be really helpfull we should try to give the complete solution.


I had this problem and solved it the following way: 


To disable the link, I gave a generic Class named (for instance) "PointerClass" to the link I was going to "disable/enable". Then, on the "onclick" extended property of the Link, I set: 


"$('.PointerClass').css('pointer-events','none');"


To enable the Link again, I put a Javascript action at the end of the action called, with the code :

"$('.PointerClass').css('pointer-events','auto');"


Regards,

Adérito Angelino



Here is a pattern that I have implemented previously that uses both client and server side locking to prevent multiple submissions.

Server Side Pattern

Client Side Pattern

if ($('#' + entry.Id).val() !== '') {  $('#' + Save.Id + "').attr('disabled',disabled");}

Adérito Angelino wrote:

Hi people!


Using server side solutions, like setting variables and refreshing buttons, might not do the trick. Succesfully preventing a double-click is usually attainable only using javascript. 

The funny thing is, I have come across many people suggesting this, but they don't tell you exactly how to do it. To be really helpfull we should try to give the complete solution.


I had this problem and solved it the following way: 


To disable the link, I gave a generic Class named (for instance) "PointerClass" to the link I was going to "disable/enable". Then, on the "onclick" extended property of the Link, I set: 


"$('.PointerClass').css('pointer-events','none');"


To enable the Link again, I put a Javascript action at the end of the action called, with the code :

"$('.PointerClass').css('pointer-events','auto');"


Regards,

Adérito Angelino



Hi,

I tried the PreventSpamClicks in a table records with buttons and it prevented clicking at all. With the JQuery script it did work!

Gr., Menno