爲什麼jQuery發佈我的表單兩次？

-1

我正在使用jQuery發佈表單，具體取決於按下哪個按鈕。我可以在螢火蟲控制檯看到表單發佈兩次。誰能告訴我爲什麼會發生這種情況？爲什麼jQuery發佈我的表單兩次？

$(document).ready(function() { 
$("#myForm").submit(function(e) { //If add btn pressed 
    e.preventDefault(); 
    var id = this.id; 
    var url = "process_ajax4.php"; 

    var formdata = $(this).serialize(); 
    formdata += "&btn=btn_add"; // added the btn 
    $.post(url, formdata, 
     function(data) { 

      $("#results").html(data); //Response 

     }); 
}); 

$("#myForm").submit(function(e) { //If add btn pressed 
    e.preventDefault(); 
    var id = this.id; 
    var url = "process_ajax4.php"; 

    var formdata = $(this).serialize(); 
    formdata += "&btn=btn_remove"; // added the btn 
    $.post(url, formdata, 
     function(data) { 

      $("#results").html(data); //Response 
     }); 
    }); 

});

表單

<td> 
    <form id="myForm" class="myForm" action="\" method= "post" enctype="multipart/form-data"> 
     <input type="hidden" name="user_id" value=". $collab_userid." /> 
     <input type="hidden" name="id" value=".$upload_id." /> 

     <button type="submit" id="btn_remove" class="btn_remove" name= "btn_remove">Remove</button> 
     <button id="btn_add" class= "btn_add" name="btn_add">Approve</button> 
    </form> 
</td>

來源

2016-11-25 JulianJ

爲什麼你有兩個提交處理程序？ –

這兩個'$（「＃myForm」）。submit'是錯誤的原因。 –

@ Ali7091雖然在許多情況下這樣做是很好的做法，但在這種情況下，它不會產生任何影響，因爲代碼'e.preventDefault（）'已經阻止了默認提交操作。重複的事件處理程序是問題的原因。 – ADyson

這是因爲你有兩個提交處理程序，並都做同樣的事情

演示：http://jsbin.com/luvenaxela/edit?html,js,output

來源

2016-11-25 13:15:27

因爲你有2個提交事件偵聽器和無狀態檢查您的表單中提交了哪個按鈕。

我建議更改爲一個提交事件監聽器（以確保只有一個AJAX請求將被觸發，並減少代碼重複），然後添加一個條件來檢查哪個按鈕被提交。

喜歡的東西：

$(document).ready(function() { 
$("#myForm").submit(function(e) { //If add btn pressed 
    e.preventDefault(); 
    var id = this.id; 
    var url = "process_ajax4.php"; 

    // Get the button name 
    var button = $(this).find("button[clicked=true]").attr('name'); 

    var formdata = $(this).serialize(); 

    switch(button){ 
     case "btn_add": 
      formdata += "&btn=btn_add"; 
      break; 
     case "btn_remove": 
      formdata += "&btn=btn_remove"; 
      break; 
    } 

    $.post(url, formdata, 
     function(data) { 

      $("#results").html(data); //Response 

     }); 
});

來源

2016-11-25 13:16:32 Curt

在這個例子中'button'被聲明在哪裏？ – ADyson

@ADYSON它不是......這只是所需邏輯的一個例子，而不是一個完整的工作解決方案。 – Curt

我明白這一點，謝謝，但似乎無法計算如何聲明按鈕。 – JulianJ

$(document).ready(function() { 

$("#myForm button[type=button]").on('click',function(e) { //If btn pressed 
    e.preventDefault(); 

    var type = $(this).attr('name'); 

    if(type == 'btn_remove'){ 

     // Action on Remove button 

    }else if(type == 'btn_add'){ 

     // Action on add button 

    } 

    }); 
});

試試這個

來源

2016-11-25 13:18:38

爲什麼jQuery發佈我的表單兩次？

回答

相關問題