Jquery 如何在表单上添加由输入字段更新触发的不可见AJAX提交，同时保留自然提交？

向聪明的开发者社区致意！！这是我第一次写作，我环顾了四周，但唉，我被卡住了，需要一些帮助。我将非常感谢任何能够帮助我的善良的灵魂

我的表单需要做两件事：

1） 当按下submit按钮时（此按钮已就位），可以像普通表单一样提交产品名称、单价和数量行

2） 在后台提交产品名称、单价和数量行（jQuery？AJAX？），由任何产品行中的任何更改触发，然后使用JSON响应更新页面底部的一些显示输出。JSON响应来自服务器。此“操作”URL与（1）中的不同

我只需要知道如何设置绑定、ready函数、监听器或者你们这些孩子现在所说的任何东西，才能让这一切顺利进行

任何帮助都将不胜感激，并将把我从巨大的黑色沉坑中解救出来，我现在正在挣扎

谢谢

干杯

---

Gene

这应该很容易做到，但我发现了一个大问题：以正常方式提交表单会导致页面被卸载。同时发出的任何AJAX请求都不可能通过，您无从得知

另外，当表单正常提交时，页面底部将不再显示任何内容，因为您已经进入下一页

---

有没有什么方法可以让你两个动作都保持在同一页上？例如，如果不想Ajaxify，可以将数据正常提交到一个不可见的IFRAME中。

我会先通过AJAX提交数据，然后通过正常表单提交。jQuery中的类似内容：

<form method="POST" action="action.php" id="myform">
 <input type="text" name="product_name" value="" />
 ... Other form elements ...
 <input type="submit" id="submit_button" value="Submit" />
</form>

<script>
 $('#myform').submit(function() {
  // Disable the submit button.
  $('#submit_button').attr('disabled', 'disabled');
  var data = new Array();
  ... Iterate form values to submit to secondary action and add to data ...
  // action2.php also accepts form data, encoded as JSON, XML, etc.
  $.post('action2.php', data, function() {
   // Submit the form _for real_ in the callback function.
   $('#myform').submit();
  });
  return false;  // prevents normal form submission
 });
</script>

... 其他表单元素。。。
$（'#myform'）。提交（函数（）{
//禁用提交按钮。
$（“#提交按钮”）.attr（'disabled'，'disabled'）；
var data=新数组（）；
…迭代表单值以提交到辅助操作并添加到数据。。。
//php还接受表单数据，编码为JSON、XML等。
$.post（'action2.php'，数据，函数（）{
//在回调函数中提交表单_forreal。
$（'#myform'）。提交（）；
});
return false；//防止正常表单提交
});

---

这给出了所需内容的大致概念。在提交到action2.php期间显示“加载”动画是个好主意。

表单中输入字段的onChange（）触发器可以调用下面的函数

<script> 

    function update_subtotals_display () {

        $.post(
            'update_subtotals_display_action_page.php', // alt action target
            $('#form').children(),  // sends over the form's inputs
            function(result) { // what to do with the result from the target output
                alert(result);  // rest of it needs to be fleshed out here
            }
        );

    }

</script>

功能更新\小计\显示（）{
美元邮政(
'update\u subtotals\u display\u action\u page.php'，//alt action target
$（'#form'）.children（），//通过表单的输入发送
函数（result）{//如何处理目标输出的结果
警惕（结果）；//其余部分需要在这里充实
}
);
}

嗨，佩卡，谢谢你的快速回复。如果这里有评级系统，我会给你5颗星。即使用户“自然地”提交表单，而AJAX请求没有通过，这也没关系——它只用于显示，不做任何重要的事情。因此，是的，它可以被中断，用户可以被发送到下一个页面。不幸的是，保持在同一个页面上不是“自然”提交的选项，因为它需要愉快地前进到下一个目的地（系统就是这样工作的——提交编辑页面以返回列表页面）。因此，这些问题已经解决了。。。有解决办法吗？：-）上面的pygorex1已经解决了我的建议。见上文。：）谢谢佩卡。谢谢pygorex，我现在正在努力实现它。仍在试图找出如何触发替代的ajaxsubmit。我会随时通知你的。谢谢你，皮戈雷克斯。我是jQuery新手，不知道.post功能。我意识到我可以从任何地方调用它，让它偷偷地将表单提交到另一个不同于表单上“自然”URL的目标操作URL。我简化了这个替代（隐藏）调用。我试着将我的代码发布在这个评论部分，但它没有显示出来，所以我将把它作为一个答案发布。