Prevent multiple form submission using Javascript
<p>I have an HTML/PHP based form with two Submit buttons-one at the top and one at the bottom. I need to prevent people from pressing Submit multiple times (thereby creating multiple records in our database), so I used a technique found <a href="http://myphpform.com/prevent-multiple-form-submissions.php" rel="nofollow">here</a> to make it so that the Submit button gets disabled when it is clicked, and also the text on the button changes from "Submit" to "Submitting; please wait...".</p>

<p>I have two problems now:</p>

<ol>
<li>Only the top button on the form is getting disabled and having its text changed. The bottom Submit button is not affected. How do I make it so both buttons are disabled/changed upon submit?</li>
<li>My page has a validateForm() function that is called when the Submit button is clicked. So if the user doesn't fill out a required field, a message box is displayed and he is directed back to the form. But now the top Submit button is still disabled (and has the changed text). How do I "reset" the buttons back to their regular enabled "Submit" state if the the validation function finds errors?</li>
</ol>

<p>Here are the relevant snippets of code. If I remove the code that disables/modifies the button, the form submits normally (but of course I don't get the functionality I'm looking for).</p>

<p>Form tag:</p>

<pre><code>&lt;form name="MyInquiry" method="post" autocomplete="off" onsubmit="document.getElementById('submitButtonTop').disabled=true;document.getElementById('submitButtonTop').value='Submitting, please wait...';document.getElementById('submitButtonBottom').disabled=true;document.getElementById('submitButtonBottom').value='Submitting, please wait...';return validateInquiryForm();"&gt;
</code></pre>

<p>Tags for the buttons:</p>

<pre><code>&lt;input type="submit" name="submitinquiryform" id="submitButtonTop" value="Submit Form" /&gt;

&lt;input type="submit" name="submitinquiryform" id="submitButtonBottom" value="Submit Form" /&gt;
</code></pre>

<p>Validation function:</p>

<pre><code>    function validateInquiryForm() {



 var valid = true;
        var errorMessage = "";

        var emailFilter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

... code to validate individual fields ...

    if (!valid)
                alert(errorMessage);

            return valid;
        }
</code></pre>

<p>Thanks,
John</p>
