Ricardo Lopes

Staff

Solved

Multi click on a submit button

Question

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>"

25 Apr 2013

Adérito da Cruz Valente Angelino

Solution

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

See solution in context

25 Jan 2018

1 reply

23 Mar 2018

Show thread

Hide thread

Menno Hoogsteen

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

23 Mar 2018

Tiago Simões

Staff

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

25 Apr 2013

Filipe Lourenço

But how to do that on client side?

18 Sep 2015

Carlos Conde

Try this:

https://www.outsystems.com/forge/component/670/prevent-spam-clicks/

18 Sep 2015

Filipe Lourenço

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

18 Sep 2015

Justin James

MVP

Filipe -

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

J.Ja

19 Sep 2015

Adérito da Cruz Valente Angelino

Solution

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

25 Jan 2018

1 reply

23 Mar 2018

Show thread

Hide thread

Menno Hoogsteen

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

23 Mar 2018

Ouen Worth

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");}

26 Jan 2018

Kommer-Jan Allart

Very nice solution this JS, works flawlessly :)

10 Apr 2019

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines