Question

我正在使用jQuery发布表单，具体取决于按下了哪个按钮。我可以在firebug控制台中看到表单被发布两次。谁能告诉我为什么会这样？

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

Answer 1

因为你有两个提交事件监听器而没有条件检查你的表单中提交了哪个按钮。

我建议更改为一个提交事件监听器（以确保只触发一个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

        });
});

Answer 2

这是因为你有两个提交处理程序并且都做同样的事情

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

Answer 3

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

    }

    });
});

试试这个

为什么jQuery会两次发布我的表单？

3 个答案: