Why is my form submitting twice?

Question

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

Is your form submitted without js too? – Shiplu Mokaddim Feb 16 '12 at 15:12 — Shiplu Mokaddim, Feb 16 '12 at 15:12
I am having the same issue, form is being submitted twice. – Obi Wan Oct 16 '13 at 15:11 — Obi Wan, Oct 16 '13 at 15:11

Manse · Accepted Answer · 2012-02-16T16:17:13.590

$('#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
});

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. — Obi Wan, Oct 16 '13 at 15:20

score 0 · Answer 2 · answered Feb 16 '12 at 15:13

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

answered Feb 16 '12 at 15:13

manny

1,878
2
15
31

If you bind to the form's `onsubmit` (and return false), then using a submit button is fine. – gen_Eric Feb 16 '12 at 15:23
1

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. – Obi Wan Oct 25 '13 at 18:23
why avoid using type="submit"? – mgrenier May 21 '15 at 15:43

score 0 · Answer 3 · edited Jul 24 '12 at 09:06

0

Try using this:

onsubmit="void(0);"

edited Jul 24 '12 at 09:06

bluish

26,356
27
122
180

answered Feb 16 '12 at 15:18

Diego Marafetti

465
3
7

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. – Diego Marafetti Feb 16 '12 at 15:30

score -1 · Answer 4 · edited Feb 16 '12 at 15:44

-1

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

edited Feb 16 '12 at 15:44

gen_Eric

223,194
41
299
337

answered Feb 16 '12 at 15:11

Diodeus - James MacFarlane

112,730
33
157
176

1

If you bind to the form's `onsubmit` (and return false), then using a submit button is fine. – gen_Eric Feb 16 '12 at 15:23
1

There is more then one way to do this. My suggestion is perfectly valid. – Diodeus - James MacFarlane Feb 16 '12 at 15:30
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. – Obi Wan Oct 25 '13 at 18:33

Why is my form submitting twice?

4 Answers4

Update