Question

我已经在SO和其他地方尝试了很多其他解决方案来解决这个问题，但我似乎无法阻止我的表单提交两次。以下是我目前遇到此问题的代码：

jQuery代码

$(function() {
  var additemtoform = $('#additemform');
  var handleData = function(responseData) {
    if ($(responseData).find('#repitems').length) {
      var replacement = $('<div />').html(responseData).find('#repitems').html();
      $('#test').html(replacement);
    } else {
      additemtoform.submit();
    }
  };

  $("#additemform .addbtn").on("click", function(e) {
    e.preventDefault();
    $.ajax({
      type: 'POST',
      url: 'WebCatPageServer.exe',
      dataType: 'html',
      cache: false,
      data: additemtoform.serialize(),
      beforeSend: function() {},
      success: function(data) {
        handleData(data);
      },
      error: function() {
        alert('error');
      }
    });
    return false;
  });
});

如果我在回调中删除了提交，那么表单根本没有提交。那么，我错过了什么？

谢谢！

更新
请注意，此代码是根据Habbe的原始建议更新的。然而，双重提交的相同问题仍然存在。

HTML代码（已生成）

  <form name="AddItem" id="additemform" method="post" action="WebCatPageServer.exe">
    <input name="Action" type="hidden" value="Add_Item" />
    <table>
    <tbody>
    <tr>
    <td><a href="WebCatPageServer.exe?PROD_FULL&ProdInfo=00012000551">BRW2394746301</a></td>
                    <td>239-47463-01</td>
                    <td>Gas Valve Complete, Icon Natural Gas</td>
                    <td> $207.32</td>
                    <td>Available</td>
                    <td>
                        <input name="Q1" tabindex="1" class="qtyfield" type="text" size="1" value="0" onblur="clickrecall(this,'0')" onfocus="Q1.select()" />
                    </td>
                    <td>
                        <input name="P1" type="hidden" value="BRW2394746301" />
                        <input name="M1" type="hidden" value="239-47463-01" />
                        <input name="D1" type="hidden" value="Gas Valve Complete, Icon Natural Gas" />
                        <button type="button" class="button lightgray smallrounded addbtn" value="Add">Add</button>
                    </td>
                </tr>
                <tr>
                    <td><a href="WebCatPageServer.exe?PROD_FULL&ProdInfo=00012000552">BRW2394746501</a></td>

                    <td>239-47465-01</td>
                    <td>Gas Valve Complete , Icon Propane</td>
                    <td> $272.58</td>
                    <td>Available</td>
                    <td>
                        <input name="Q2" tabindex="2" class="qtyfield" type="text" size="1" value="0" onblur="clickrecall(this,'0')" onfocus="Q2.select()"/>
                    </td>
                    <td>
                        <input name="P2" type="hidden" value="BRW2394746501" />
                        <input name="M2" type="hidden" value="239-47465-01" />
                        <input name="D2" type="hidden" value="Gas Valve Complete , Icon Propane" />
                        <button type="button" class="button lightgray smallrounded addbtn" value="Add">Add</button>
                    </td>
                </tr>
                <tr>
                    <td><a href="WebCatPageServer.exe?PROD_FULL&ProdInfo=00012000553" style="text-decoration:underline;">BRW2334784505</a></td>
                    <td>233-47845-05</td>
                    <td>Pilot Assembly, Icon Natural Gas</td>
                    <td>  $32.58</td>
                    <td>Available</td>
                    <td>
                        <input name="Q3" tabindex="3" class="qtyfield" type="text" size="1" value="0" onblur="clickrecall(this,'0')" onfocus="Q3.select()" />
                    </td>
                    <td>
                        <input name="P3" type="hidden" value="BRW2334784505" />
                        <input name="M3" type="hidden" value="233-47845-05" />
                        <input name="D3" type="hidden" value="Pilot Assembly, Icon Natural Gas" />
                        <button type="button" class="button lightgray smallrounded addbtn" value="Add">Add</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>

解决方案 - 最终代码

事实证明，我正在过度思考这一点。表单是在初始提交时通过ajax提交的。表单在回调中再次提交。由于在初始提交时将项目添加到购物车，我只是在回调中加载了购物车页面。

$(function() {
var additemtoform = $('#additemform');

// Reset Qty to 0 on Page Load
$('#additemform .inputqty').val('0');

//Ajax CallBack
var handleData = function(responseData) {
if ($(responseData).find('#repitems').length) {
var replacement = $('<div />').html(responseData).find('#repitems').html();
$(replacement).appendTo('body').modal();
} else {
location.href =  "WebCatPageServer.exe?Cart";
}
};

$("#additemform .addbtn").on("click", function(e) {
e.preventDefault();


// If qty is 0, set value to 1
if($(this).closest('tr').find('input[type=text]').val() === '0'){
$(this).closest('tr').find('input[type=text]').val('1');
}
else {
}


// Post Form
$.ajax({
type: 'POST',
url: 'WebCatPageServer.exe',
dataType: 'html',
cache: false,
data: additemtoform.serialize(),
beforeSend: function() {},
success: function(data) {
handleData(data);
},
error: function() {
alert('error');
}
});
return false;
});

Answer 1

NB！确保绑定仅发生一次，并且您的表单中没有多个提交元素。

您可以尝试包含event.stopPropagation调用。我不知道这会对任何事情产生什么影响，但也许值得一试。

＆＃13;

$(function() {
  var additemtoform = $('#additemform');
  var handleData = function(responseData) {
    if ($(responseData).find('#repitems').length) {
      var replacement = $('<div />').html(responseData).find('#repitems').html();
      $('#test').html(replacement);
    } else {
      additemtoform.submit();
    }
  };

  $("#additemform .addbtn").on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();

    $.ajax({
      type: 'POST',
      url: 'WebCatPageServer.exe',
      dataType: 'html',
      cache: false,
      data: additemtoform.serialize(),
      beforeSend: function() {},
      success: function(data) {
        handleData(data);
      },
      error: function() {
        alert('error');
      }
    });
    return false;
  });
});

＆＃13;

Answer 2

在第三行，函数（e）打开告诉函数handleData（responseData）运行oy省略闭包}。然后在ajax中告诉函数handleData（responseData）再次运行。

Answer 3

试试这个：

$(function() {
    var additemtoform = $('#additemform');
    $("#additemform .addbtn").off().on("click", function(e) {
    ///your code


});

Answer 4

我的猜测是，因为您正在两次调用提交表单操作。一旦进入表单标签，其次进入jquery。尝试删除一个，看看会发生什么。

Answer 5

在第一次ajax调用期间，表单未提交。只需传递调用并接收响应长度0或null。所以else部分要求再次提交表单。因此，请在第一次调用之前尝试提交表单，并确保表单提交目标为self（）。

祝你好运！

Ajax Post提交功能提交两次

5 个答案: