Login/Register
Why is my form submitting twice?
Asked Answered
Solved phpjqueryformsjquery-forms-plugindouble-submit-problem
A

4

10

SO for some reason my form is submitting two times with a single button press. This is my first time using jquery Form plugin, and I imagine that jquery is submitting once and the form is "naturally" submitting as well. I have seen that the remedy is to attach a "return false" to the onSubmit event handler of the form. I thought I am doing that, but obviously it is not working.

Can anyone help?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>User form entry </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.validate.js"></script>
<script src="jquery.passwordStrength.js"></script>
<script src="jquery.form.js"></script>
<script>

$(document).ready(function() {
    $('#signupForm').ajaxForm(function() { 
         var queryString = $('#signupForm').formSerialize(); 
         $.post('process.php', queryString);
    });
});
</script>
</head>
<body>
   <form id="signupForm" action="process.php" onsubmit="return false" method="post">
   <fieldset class="password">
          ... form goes here
   <button type="submit" name="formSubmit" value="submit">Click to submit</button>
   </form>

<div id="results"></div>

</body>
</html>

I have tried adding onsubmit="return false" to the form element, but then I have no submission at all. I have also tried adding "return false;" to the jQuery, but then I still have double submissions. What am I missing? This seems to be the standard methodology according to the jQuery Form Plugin site.. how is my form different?

(By the way, just to be clear.. I am not talking about the problem of having multiple consecutive form submits by pressing the button repeatedly. My problem is "one submit button push = two submits".)

Anadiplosis answered 16/2, 2012 at 15:8 Comment(2)
Is your form submitted without js too? – Burnish
I am having the same issue, form is being submitted twice. – Barcus
R
21
$('#signupForm').ajaxForm(function() { 
            var queryString = $('#signupForm').formSerialize(); 
            $.post('process.php', queryString);

});

This is submitting it twice .... the ajaxForm method once and then the post() the second time

The ajaxForm method handles the form sumbission for you ... you dont need to add the post() method ... the function inside of ajaxForm is a callback, executed on success ...

$('#signupForm').ajaxForm(function() { 
       alert("Thank you for your comment!"); 
});

this code would show the alert after the successful post ... simple example here -> http://jquery.malsup.com/form/

You should also remove the onsubmit attribute from the form ...

Update

If you want to show results ... do it like this :

$(document).ready(function() { 
    $('#signupForm').ajaxForm({ target: '#results' }); 
    // this will output the responseText from the submitted form to the target DOM element
});
Revisal answered 16/2, 2012 at 15:11 Comment(1)
I am calling ajaxForm the way you say, but I am still getting the double post. One difference is that I am doing a file upload in the submit. The first time the upload handler gets called, the HttpPostedFileBase is correct, the second time it is called, the HttpPostedFileBase is nothing. I can workaround the issue easily enough but I would prefer not to have to. – Barcus
N
0

avoid using 

<button type="submit" name="formSubmit" value="submit">

so naturally your submit button will do one submit and your jquery will do another submit

use this

<input type="button" name="formSubmit" value="submit">
Neo answered 16/2, 2012 at 15:13 Comment(3)
If you bind to the form's onsubmit (and return false), then using a submit button is fine. – Dorinedorion
When I use a button instead of submit the form does not submit at all. Binding to the form's onsubmit and returning false does not alleviate the double post issue. – Barcus
why avoid using type="submit"? – Portulaca
S
0

Try using this:

onsubmit="void(0);"
Skeptic answered 16/2, 2012 at 15:18 Comment(1)
he was returning false. That prevents the event to be propagated at all. This code just do nothing and the code above will submit the form. Sending form twice is because of the $.post call like someone answered here. – Skeptic
H
-1

Don't use a submit button. Use a regular button.

Handbill answered 16/2, 2012 at 15:11 Comment(3)
If you bind to the form's onsubmit (and return false), then using a submit button is fine. – Dorinedorion
There is more then one way to do this. My suggestion is perfectly valid. – Handbill
Using a regular button does not submit the form at all. Binding to the form's onSubmit and returning false does not alleviate the double post issue. – Barcus

© 2022 - 2024 — McMap. All rights reserved.