如何在不刷新页面的情况下自动提交两个forms？

Question

 <form id="addToCart" action="http://my-website/cart/action.php">
   <input type="hidden" name="action" value="add" />
   <input type="hidden" name="itemNum" value="201" />
   <input type="submit" value="Submit request" />
 </form>

 <form id="buy" action="http://my-website/cart/action.php?action=buy" method="POST">
   <input type="submit" value="Submit request" />
 </form>

 <script> 
    document.forms[0].submit();
    document.forms[1].submit();
 </script>
 

这只提交第一个表单而不是第二个。 我怎样才能让它同时提交两者？

在有人问之前，我也在下面尝试了这个，但它仍然没有用。

document.getElementById("addToCart").submit(); document.getElementById("buy").submit();

Answer 1

按喜好顺序

1. 提交所有数据以采取行动并进行添加和购买
2. 使用ajax，在第一次提交成功后提交第二次表单

const url = "https://my-website/cart/action.php";
document.getElementById("container").addEventListener("click", e => {
  const itemNum = e.target.dataset.itemnum;
  fetch(url, {
      method: "post",
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },

      //make sure to serialize your JSON body
      body: JSON.stringify({
        action: "add",
        itemNum: itemNum
      })
    })
    .then(() => {
      fetch(url, {
        method: "post",
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },

        //make sure to serialize your JSON body
        body: JSON.stringify({
          action: "buy",
          itemNum: itemNum
        })
      })
    })
});

<div id="container">
  <input type="button" data-itemnum="201" value="Buy 201 with one click " />
  <input type="button" data-itemnum="202" value="Buy 202 with one click " />
  <input type="button" data-itemnum="203" value="Buy 203 with one click " />
</div>

3. 两个 iframe（不要更改字段或方法，仅更改操作的值）：

 <form id="addToCart" method="post" action="http://my-website/cart/action.php" target="iframe1">
   <input type="hidden" name="action" value="add" />
   <input type="hidden" name="itemNum" value="201" />
   <input type="submit" value="Submit request" />
 </form>

 <form id="buy" action="http://my-website/cart/action.php" method="POST"  target="iframe2">>
   <input type="hidden" name="action" value="buy" />
   <input type="hidden" name="itemNum" value="201" />
   <input type="submit" value="Submit request" />
 </form>
<iframe name="iframe1"></iframe>
<iframe name="iframe2"></iframe>
 <script> 
    document.forms[0].submit();
    setTimeout(() => document.forms[1].submit(),2000);
 </script>
 

Answer 2

您可以使用 AJAX 和 JQuery $.post() 方法同时提交两个 forms。

 $(document).ready(main); function main(){ submitFormUsingAjax('#addToCart'); submitFormUsingAjax('#buy'); } function extractInputDataOfFromRef(formSelector){ var $inputRefs = $(formSelector +' input:not([type=submit])'); var data = {}; $inputRefs.each(function($index){ var name = $(this).attr("name"); var value = $(this).attr("value"); data[name] = value; }) return data; } function submitFormUsingAjax(formSelector){ var $formRef = $(formSelector); var url = $formRef.attr('action'); var data = extractInputDataOfFromRef(formSelector); var method = $formRef.attr('method'); method = method && method.toUpperCase(); var posting; if(method == 'GET'){ posting = $.get(url,data); }else{ posting = $.post(url,data) } posting.done(function(response) { console.log("form submitted: ",response); }); posting.fail(function(error) { console.log("form submittion failed:",error.statusText); }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="addToCart" action="http://my-website/cart/action.php" method="get"> <input type="hidden" name="action" value="add" /> <input type="hidden" name="itemNum" value="201" /> <input type="submit" value="Submit request" /> </form> <form id="buy" action="http://my-website/cart/action.php?action=buy" method="POST"> <input type="submit" value="Submit request" /> </form>

Answer 3

这将是我的方法。 使用 jquery ajax 为每个表单定义一个.submit() function（提交时要遵循的程序）。 使用.click()以编程方式“单击”两个提交按钮。 然后使用return false来防止页面刷新。 这应该同时提交两个 forms。 如果没有 php 操作，我无法对此进行测试。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="addToCart" action="http://my-website/cart/action.php" method="get">
    <input type="hidden" name="action" value="add" />
    <input type="hidden" name="itemNum" value="201" />
    <input type="submit" value="Submit request" />
</form>

<form id="buy" action="http://my-website/cart/action.php?action=buy" method="post">
    <input type="submit" value="Submit request" />
</form>

<script>
    $(document).ready(function() {
        const $addToCartForm = $("#addToCart");
        const $buyForm = $("#buy");
        const addToCartUrl = $("#addToCart").attr("action");
        const buyUrl = $("#buy").attr("action");
        $buyForm.submit(function() {
            $.ajax({
                url: buyUrl,
                type: $buyForm.attr("method"),
                data: $buyForm.serialize()
            });
            return false;
        });
        $addToCartForm.submit(function() {
            $.ajax({
                url: buyUrl,
                type: $addToCartForm.attr("method"),
                data: $addToCartForm.serialize()
            });
            return false;
        });

        $addToCartForm.find("[type='submit']").click();
        $buyForm.find("[type='submit']").click();
    });
</script>

Answer 4

document.forms[0].onsubmit = (e) => {
    e.preventDefault();
}