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“Firebug”扩展程序的网络标签上检查网络进程时，只需点击一次即可向同一个网址显示两个请求？

现在我很困惑我做错了什么？为什么只需点击一下就可以向同一个网址发送两个请求？任何帮助非常感谢，请

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完成它的工作。所以可能会发生碰撞

jQuery single submit将两个请求发送到同一个url

2 个答案: