Prevent double form submit

Wappler General How To
#1

it will be great if we can disable the form or the submit button when the user click on it.

#2

you can do it easly …

change element attr. when form submited

#3

and how do you set it back after a successful or failed submission?

#4

select form
then click to static events success or error …

#5

so you can disable the button when clicked and re enabling it after a successful submission?

#6

Very easily. I’ll do up a video when I decide to get out of bed and have my coffee. :wink:

1 Like
#7

thank you very much!
this will be helpful :hugs:

#8

I’lll still do a video if you need, but here is a step by step.

1: Select your form button
2: Click on Add Dynamic Attribute
3: Click on Display
4: Click on Hide
5: Click on Lightning bBolt in Properties Panel
6: In the Data Binding panel expend your form if it isn’t already expanded
7: Click on State
8: Select Processing
9: Click on Select at the bottom

This will hide the button while the form is processing and the button will reappear when the form is submitted. In some cases I have used this method to hide the entire form and display a precessing message while the form is processing.

31%20AM
Screen Shot 2018-06-01 at 8.17.31 AM.png618×774 58.2 KB

4 Likes
#9

Move to the “How To” category - as this is definitely a good tip! Well done @brad

#10

It’s also possible to show a spinner in the button, while the server action is executing: Show Disabled Button with Spinner on Form Submit

1 Like