I’m trying to use the jQuery forms plugin to dynamically submit a form on change.
It’s definitely working, but everytime a user changes an input value, it does the .post, runs my success “alert()” and then repeats, over and over, until I refresh the page to stop the loop. Here’s the code:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AJAX Form Test Suite</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script src="_scripts/jquery.form.js"></script>
<script>
$(document).ready(function() {
var options = {
success: alertYes // post-submit callback
};
// binding to each input's change event
$('#mainForm input').change(function() {
$(this).parent().ajaxSubmit(options);
return false;
});
//success callback function
function alertYes() {
alert('You did it!');
}
});
</script>
</head>
<body>
<div id="ajaxMessage">
<h1>This is a suite AJAX form</h1>
<form id="mainForm" action="saveForm.php" method="post">
<ul class="nolist">
<li class="label"><label>Name</label></li>
<li class="input"><input type="text" name="name" value="Eric Roberts" /></li>
<li class="label"><label>Email</label></li>
<li class="input"><input type="text" name="email" value="e-rob@tvgods.com" /></li>
<li class="label"><input type="submit" name="submit" value="DO IT" /></li>
</ul>
</form>
</div>
</body>
</html>
What am I doing wrong to make it continually loop like that? I’m assuming it’s something where when the .post returns, after the alert, it blurs an input again which resubmits the ajax call, over and over, but I don’t know why it would do that?
Thanks.
I believe your alert() call is causing the blur() event of the form to trigger, thus making the form resubmit.
update
If you’re using Firebug, you can use the following javascript:
to emit messages to the Firebug console. I typically wrap it in a call like this:
and then call status(‘my message here…’) within my javascript to emit any debugging/trace messages that I require. By wrapping it in a function as I’ve done above, you ensure that the code will still work when running in a browser that hasn’t defined the console object, (IE or any browser that doesn’t have Firebug installed).