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="[email protected]" /></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.