Page 1 of 1

Submit Form AND Change Button Values

Posted: Sun Apr 09, 2023 8:20 pm
by mfirlotte
I have a Contact Us mail form where the Submit button is hidden until the user checks the Terms and Conditions checkbox then the Submit button becomes visible and clickable. Works just great and submits the form with no problems.

However, I'd like to add some new behaviors to the button that are causing me a bit of grief. I want this new behavior because at times, the submitting seems a bit slow and I do not want the user to click a 2nd time or to think that the form is not submitting.

What I'd like to do is...
Once the button is clicked, I'd like to 1) change the text (and color if possible) of the button from "Submit" to "Submitting..." , 2) disable the button so it cannot be clicked a 2nd time, and 3) submit the form.

I've tried events but can only seem to get one to work at a time. I've also tried javascript in events but that too seemed to only do one and not the others.

Any ideas? Thanks.

Re: Submit Form AND Change Button Values

Posted: Mon Apr 10, 2023 6:26 am
by Pablo
Maybe this will helpful?
viewtopic.php?t=37833

Re: Submit Form AND Change Button Values

Posted: Mon Apr 10, 2023 8:33 am
by BaconFries
Try adding the following to a onclick of the button. See Pablos reply due to you are adding a event to the original submit and anything else added will block the original submit of the button.

Code: Select all

this.disabled=true;this.value='Submitting, please wait...';this.form.submit(); return true;

Re: Submit Form AND Change Button Values

Posted: Mon Apr 10, 2023 4:42 pm
by mfirlotte
Awesome. Will give this a try this evening. Looks like it's exactly what I'm after.

Didn't realized a new event would disable the submit.

Thanks for this info and code guys!!!!


SUPER! Just tried the code and it works perfectly! Thanks so much again for this fabulous forum and product.

Re: Submit Form AND Change Button Values

Posted: Mon Apr 10, 2023 5:14 pm
by BaconFries
When you use a Submit button on a form it already has its own click event (submit) to send the information of the form to the server to be processed by php or even asp. If you then add another event say in javascript onclick then this overrides the original event of the button (click) and then stops the form submitting. So when we add a line of javascript as shown we need to include return true; this then allows the javascript to fire (do what is meant) along with the click (submit) of the form.

Re: Submit Form AND Change Button Values

Posted: Mon Apr 10, 2023 6:49 pm
by BaconFries
Glad to have helped.

Re: Submit Form AND Change Button Values

Posted: Tue Apr 11, 2023 2:33 pm
by mfirlotte
Thanks BaconFries!

I was not aware of the two events having such impacts (built-in submit event versus my add-on events) nor the "return true" requirement.

Thanks for the education. This will always be in the back of my mind now.