为什么Ajax表单提交两次？

Question

为什么下面的脚本会导致表单提交两次？即使在互联网上发布其他解决方案后，我也无法弄清楚。提交两次会导致数据库中出现重复条目​​。预先感谢您对此进行调查！

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#form-error').hide(); 
    $("#form-submit").click(function(){ 
     $("#form").submit(); 
    }); 
}); 

$('#form').submit(function(e) { 
      register(); 
    e.preventDefault(); 
    }); 

function register() 
{    
    jQuery.ajax({ 
     method: 'POST', 
     url: 'actions/add.php', 
     data: $('#form').serialize(), 
     dataType:'json', 
     success: function(msg){ 

      if(parseInt(msg.status)==1) 
      { 
       window.location=msg.txt; 
      } 
      else if(parseInt(msg.status)==0) 
      { 
       error(1,msg.txt); 
      } 
     } 
    }); 

}    

function hideshow(el,act) 
    { 
    if(act) 
     { 
     $('#'+el).hide(0).slideDown(500, 'linear'); 
     } 
    else $('#'+el).hide(); 
    } 

function error(act,txt) 
    { 
    if(txt) 
     { 
     $('#form-error').html(txt); 
     } 
    $('#form-error').hide(0).slideDown(500, 'linear'); 
    } 
</script> 

HTML表单：

<form id="form"> 
      <p>First Name:</p> 
      <input type="text" name="firstname" /> 
      <p>Last Name:</p> 
      <input type="text" name="lastname" /> 
      <p>E-Mail Address:</p> 
      <input type="text" name="emailaddress" /> 
      <p>Sequence Assignment:</p> 
      <select name="sequence"> 
       <option value="1">Default Sequence</option> 
      </select> 
      <button id="form-submit">Add User</button> 
      <p id="form-error"></p> 
</form> 

Answer 1

有用于提交事件重复的事件监听器：

1.提交按钮点击：

$("#form-submit").click(function(){ 
    $("#form").submit(); 
}); 

2.当表单提交：

$('#form').submit(function(e) { 
      register(); 
    e.preventDefault(); 
}); 

你只需要一个其中。

更改您的代码，如：

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#form-error').hide(); 
    $('#form').submit(function(e) { 
     register(); 
     e.preventDefault(); 
    }); 
}); 

function register() 
{ 
    . 
    . 
    . 

Answer 2

我有一个类似的问题这一点。如果你只是单击按钮，它会输入重复的数据？

我得到的方式是点击发生后，我禁用了按钮，直到Ajax调用。

function register() 
{  
    //disable button   
    jQuery.ajax({ 
     method: 'POST', 
     url: 'actions/add.php', 
     data: $('#form').serialize(), 
     dataType:'json', 
     success: function(msg){ 

      if(parseInt(msg.status)==1) 
      { 
       window.location=msg.txt; 
      } 
      else if(parseInt(msg.status)==0) 
      { 
       error(1,msg.txt); 
      } 
     } 
    }); 
    //Enable Button 
}   

另一种选择是在php代码中进行一些检查，将它提交给数据库以查看数据是否已经存在。