Submit Form AND Change Button Values

[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.

[Pablo]

Maybe this will helpful?
viewtopic.php?t=37833

[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;

[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.

[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.

[BaconFries]

Glad to have helped.

[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.