Jquery + ajax - form sometimes submits multiple times
I have a form with a jquery listener that runs when you click the submit button. If there are errors an alert box will pop up telling you what they are. sometimes this box will pop up multiple times because the form is being re-submitted without clicking the submit button. Can anyone tell me why this is happening?
live demo:
http://bluejagweb.com/corfro/6qube_mirror/test_contact_form.html
HTML - test_contact_form.html
-
<div id="request-more-info-form">
<h2>Request a free consultation</h2>
<div id="error_cnt"></div>
<form id="consultation" method="post" target="uploadIFrame" action="add_contact.php">
<input name="lead_source_id" value="index" type="hidden">
<ul>
<li><input id="name" name="name" title="Name*" type="text"></li>
<li><input id="email" name="email" title="Email*" type="text"></li>
<li><input id="phone1" name="phone" title="Phone Number*" type="text"></li>
<li><input id="website" name="website" title="Website (URL)*" type="text"></li>
</ul>
<input value="submit" id="request-more-info-submit_btn" type="submit"><p>*Required field</p>
</form>
</div>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/ajax_form.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.hint.js"></script>
<script language="javascript" type="text/javascript" charset="utf-8">
$(function(){
$('input[title!=""]').hint();
});
</script>
<!-- hidden iframe -->
<iframe style="display:none;" id="uploadIFrame" name='uploadIFrame' scrolling="no" frameborder="0" hidefocus="true" src="upload.php"></iframe>
JS - ajax_form.js
-
$('#request-more-info-submit_btn').click(function(){
$(this).parent().submit(); //submit the form
$(this).parent().unbind("submit");
$('#uploadIFrame').load(function(){ //get contents of iframe you submitted the form to
JSONFile = "data = "+$(this).contents().text(); //grabbing contents
eval(JSONFile);
if(data.result == 'true'){
$('#request-more-info-form').replaceWith('<p><strong>Success</strong><br />we have sent you an email with more infomation</p>');
}
else{
alert(data.status);
$('input[title!=""]').hint();
}
});
});
PHP - add_contact.php
-
...
if($validator->foundErrors())
{
echo '{"result": "false", "status": "'. $validator->listErrors('\n\n') .'"}';
}
else
{
echo '{"result": "true", "status": "success"}';
}
...