Why is my form submitting twice?
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".)
Answer
$('#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
});