jQuery的單提交發送兩個請求相同的URL

Question

我有下面的HTML表單：

<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> 

我有以下連接到該網頁，其中驗證並提交此表下面的方法.js文件：

  // 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); 
           } 
          }); 
         } 
        }); 
      }); 

每一件事情會完美的，但問題是，當我檢查網絡選項卡上的網絡進程的Firefox「螢火蟲」擴展它顯示了兩個請求相同的URL與一個單一的點擊？

現在我很困惑，我做錯了什麼？爲什麼只需點擊一次就可以向同一個網址發送兩個請求？任何幫助是非常讚賞，請

Answer 1

使用on處理程序而不是綁定，並解除綁定，使其僅觸發一次。

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

Answer 2

形式標記添加onsubmit="return false"這樣

<form method="post" action="create_user" autocomplete="off" class="user_create_form">

我想它會工作。你的表單標籤完成它的工作並且js完成它的工作。因此可能會發生衝突