Menu
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".)
887
Use JQuery to Prevent Multiple Form Submissions To prevent the user from submitting a form multiple times, we'll use JQuery to listen for the submission event. Once the form is submitted, we'll add a disabled attribute to the button to prevent multiple form submissions. Now the user can't click it again.
php // Prevent Multi Submit on all WPCF7 forms add_action( 'wp_footer', 'prevent_cf7_multiple_emails' ); function prevent_cf7_multiple_emails() { ?> <script type="text/javascript"> var disableSubmit = false; jQuery('input. wpcf7-submit[type="submit"]'). click(function() { jQuery(':input[type="submit"]').
$('#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 ...
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
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
