Почему форма 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, который подает его в базу данных, чтобы увидеть, если уже существует, что данные.