Abdul Rahman Abdul Rahman - 1 month ago 5
Ajax Question

jQuery single submit sends two requests to the same url

I have to the following html form:

<form method="post" action="create_user" autocomplete="off" class="user_create_form">
<table class="table table-bordered user">
<tr>
<td class="w20"> Pick Role/Module </td>
<td> <?php echo($db->getRolesCmb()); ?> </td>
</tr>
<tr>
<td> Pick Employee </td>
<td> <?php echo($db->getEmployeeCmb()); ?> </td>
</tr>
<tr>
<td> Choose User ID </td>
<td> <input type="text" name="userid" id="userid" placeholder="Choose User Id for Login"> </td>
</tr>
<tr>
<td> Choose User Password </td>
<td> <input type="password" name="userkey" id="userkey" placeholder="Choose User Password for Login"> </td>
</tr>
<tr>
<td> Confirm User Password </td>
<td> <input type="password" name="cuserkey" id="cuserkey" placeholder="Confirm User Password for Login"> </td>
</tr>
<tr>
<td> Login Status </td>
<td> <input type="radio" name="user_status" id="user_status1" value="1" checked> Enabled
<input type="radio" name="user_status" id="user_status2" value="0"> Disabled
</td>
</tr>
<tr>
<td colspan="2">
<button name="btnSave" id="btnSave" class="btn btn-success">Create User</button>
&nbsp;&nbsp;&nbsp;
<span id="msg"></span>
</td>
</tr>
</table>
</form>


I have to following .js file attached to this page which validate and submit this form with the following method:

// JavaScript Document
"use strict";
$(document).ready(function(e) {
$(".user_create_form").bind("submit",function(event){
event.preventDefault();
if($("#roles").val() == ""){
$("#roles").focus();
$("#msg").html('Please select Module for User').addClass("text-danger");
return false;
}
else if($("#emp_sno").val() == ""){
$("#emp_sno").focus();
$("#msg").html('Please select employee for the login').addClass("text-danger");
return false;
}
else if($.trim($("#userid").val()) == ""){
$("#userid").focus();
$("#msg").html('User id is required here').addClass("text-danger");
return false;
}
else if($.trim($("#userkey").val()) == ""){
$("#userkey").focus();
$("#msg").html('Please choose password for user login').addClass("text-danger");
return false;
}
else if($.trim($("#cuserkey").val()) == ""){
$("#cuserkey").focus();
$("#msg").html('Password confirmation required').addClass("text-danger");
return false;
}
else if($.trim($("#userkey").val()) != $.trim($("#cuserkey").val())){
$("#cuserkey").focus();
$("#msg").html('Password does not match').addClass("text-danger");
return false;
}
else{
// save login information to database
$.ajax({
url: 'myPageUrl.php',
data: new FormData(this),
type:"POST",
cache:false,
contentType:false,
processData:false,
success: function(txt){
$("#msg").html(txt).removeClass('text-danger');
},
error: function(xhr){
$("#msg").html(xhr);
}
});
}
});
});


Every thing are going perfect but the problem is that when i check the network process on net tab on firefox "Firebug" extension it shows two requests to the same url with one single click?

Now i am confused where i am doing wrong? why it sends two requests to the same url with one single click? any help be very appreciated, please

rob rob
Answer

Use an on handler instead of bind, and unbind it so it only fires once.

$(document).ready(function(e) {
   $('#user_create_form').unbind().on('submit', function() { ... })
 })
Comments