Prevent multiple form submission using Javascript

Question

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

I have two problems now:

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

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

Form tag:

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

Tags for the buttons:

<input type="submit" name="submitinquiryform" id="submitButtonTop" value="Submit Form" />

<input type="submit" name="submitinquiryform" id="submitButtonBottom" value="Submit Form" />

Validation function:

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

Thanks, John

We will need to see some of your code to offer proper advice. — Vincent Ramdhanie
– Vincent Ramdhanie, Commented Oct 27, 2011 at 18:19
@onatm: same class maybe, same id = bad. ids must be unique in a page. — Marc B
– Marc B, Commented Oct 27, 2011 at 18:29
@onatm i thougth you where being sarcastic when you said give both buttons the same id — david
– david, Commented Oct 27, 2011 at 20:55
@david acctually i have never thougth that ids should be unique but i have always use them as unique. maybe the only sarcasm here is that :) — onatm
– onatm ♦, Commented Oct 27, 2011 at 21:37

Kumar Kush · Accepted Answer · 2011-10-27 18:39:20Z

1

@onatm : Using same id won't help. Only first instance of tag will be handled by JS, not the ones after that.

You can do something like this....Use jquery. Give both buttons the same class say "SUBMIT". Now write the following code:

var myForm = document.forms[0];
$(document).ready(function(){
    $(".SUBMIT").click(function(){
        if(validateInput()){
            $(".SUBMIT").attr("disabled", true).val("Submitting..");
            var url = "any URL you like";
            var data = {
                           field1: myForm.field1.value,
                           field2: myForm.field2.value,
                           .
                           .
                       };
            $.post(url, data,
                function(Result){
                    alert(Result); // Write whatever logic you want
                }
            )
            .complete(function(){
               $(".SUBMIT").attr("disabled", false).val("Submit");
            })
            .error(function(){
               alert("Some error");
               $(".SUBMIT").attr("disabled", false).val("Submit"); 
            });
        }
        else{
            alert("Enter the missing fields first"); // Write whatever your logic
        }
    });
});

function validateInput(){
    if (all fields are entered) // Write you logic here
        return true;
    else
        return false
}

The code should solve your first problem. For second problem, you have to explicitly write code to test authenticity for each field in the function validateInput().

answered Oct 27, 2011 at 18:39

Kumar Kush

2,57211 gold badges32 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kumar Kush Over a year ago

If you don't know about jquery, simply download any version of jquery.1.6.x.js from jquery.com. Include it into the <HEAD> tag of your web-page like this <script src="yourpath/jquery.1.6.x.js" /> Write the code I posted after that.

onatm Over a year ago

at least i said id/class :) but thank you and MarkB for clarifying this.

johnnyb10 Over a year ago

Thanks; I would like to avoid using jquery if possible. This is for work, and I'm not sure they would want me to add that to the form. (I'm ignorant about jquery, so there might be no cause for concern, but I want to keep the solution as simple as possible.)

Kumar Kush Over a year ago

@johnnyb10 : It's all right. But I do suggest to give it a shot, not in you project though. Initially it looks hard (almost to everyone), but as you start getting comfortable with it, you'll love to use it anywhere you can. It will save a lot of time and effort. In fact, that is the monologue of jquery...CODE LESS, DO MORE. Sorry, but I am NOT forcing you to use it.

Salvatore Previti · Accepted Answer · 2011-10-27 19:29:17Z

1

onsubmit="
    document.getElementById('myButtonTOP').disabled=true;
    document.getElementById('myButtonTOP').value='Submitting, please wait...';
    document.getElementById('myButtonBOTTOM').disabled=true;
    document.getElementById('myButtonBOTTOM').value='Submitting, please wait...';
    return true;"

Would be better to call a javascript function declared in a <script></script> region of course.

So i would write a function like...

var mySubmitted = false;

function MyCheckSubmit()
{
    if (mySubmitted)
        return false; // Already submitted!

    if (!validateInquiryForm())
        return false; // Validation failed!

    // disable submit buttons

    document.getElementById('myButtonTOP').disabled=true;
    document.getElementById('myButtonTOP').value='Submitting, please wait...';
    document.getElementById('myButtonBOTTOM').disabled=true;
    document.getElementById('myButtonBOTTOM').value='Submitting, please wait...';

    // Store in our global variable that we submitted this form.
    mySubmitted = true;

    return true; // Ok, we can submit!
}

and of course in the form

onsubmit="return MyCheckSubmit();"

This will also work if you press multiple time "enter" key in an input textbox, since it uses an internal variable to check if form was already submitted.

Be careful to declare the script block of course before the form, possibly in the head section.

edited Oct 27, 2011 at 19:29

answered Oct 27, 2011 at 18:18

Salvatore Previti

9,11033 silver badges38 bronze badges

2 Comments

johnnyb10 Over a year ago

Thanks, this is what I'm doing, and it seems to work as far as disabling/changing the buttons is concerned. But it doesn't actually submit the form; no records are created in my database.

johnnyb10 Over a year ago

Thanks; I tried this new version and it seemed to partially work. The Form was submitted correctly, but the button labels were not being updated and the buttons weren't being disabled. Then I realized that I had the wrong button names; I hadn't yet changed the button names that you used in your example. So I corrected the button names, but now I have the reverse problem: the buttons disable/change, but the form is not being submitted. Any ideas?

david · Accepted Answer · 2011-10-27 21:38:43Z

you could place this in correct condition when the form validation conditions are met, thus only disabling on submit, you would need to return 'this' as reference in your onsubmit="return MyCheckSubmit(this);"

  var topButton = document.MyInquiry.submitinquiryform; // top
  var botomButton = document.otherMyInquiry.submitinquiryform; // bottom

 if(beingSubmitted.name == "MyInquiry"){ 

   topButton.value = "Please wait...";
   //beingSubmitted.action = "process.php" // action page
   beingSubmitted.submit();

  }else{
   //beingSubmitted.action = "process2.php" // action page
    botomButton.value = "Please wait...";
    beingSubmitted.submit();
}
//beingSubmitted.action = "process.php" // action page would handle for both form you could check which form is being submitted by sending a value in a hidden filed 
 topButton.disabled = true;
 botomButton.disabled = true;

I noticed you have no action eather on the form

Collectives™ on Stack Overflow

Prevent multiple form submission using Javascript

3 Answers 3

@onatm : Using same id won't help. Only first instance of tag will be handled by JS, not the ones after that.

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

@onatm : Using same id won't help. Only first instance of tag will be handled by JS, not the ones after that.

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related