使用一个提交按钮提交两个表单 jQuery

Question

使用一个提交按钮提交两个表单 jQuery

6

我尝试了多种方法来完成这个任务，通过在stackoverflow上搜索答案。

我有两个表单

表单 1 的基本设置：

<form action="/post" class="frm-form"  method="post" name="post" 
onsubmit="return vB_Editior['text_editor'].prepare_submit(0,0)" id="quick_reply">
   <textarea></textarea>
      <input type="submit" name="post" value="Send">
</form>

Form 2基本设置:

<form enctype="multipart/form-data" id="tagnotif" style="display:none;" 
onsubmit="return vB_Editor['text_editor'].prepare_submit(0,0)" name="post2" 
method="post" action="/privmsg">
   <input id="username" class="post" type="text" tabindex="1" size="25" 
       name="username[]"style="margin:1px 0"><br />
   <input id="acpro_inp10" class="post" type="text" 
     onkeypress="if (event.keyCode==13){return false}" title="" tabindex="2" 
    maxlength="64" size="45" value="You have been tagged" name="subject"><br />
  <textarea id="textingnotification" rows="15" cols="9"
   name="message" tabindex="3"></textarea>
   <input type="hidden" value="" name="lt">
     <input type="hidden" value="inbox" name="folder">
       <input type="hidden" value="post" name="mode">
</form>

我只需要在第一个表单提交时，提交这两个表单。

尝试使用此代码和主要脚本的变量：虽然它不能同时通过两个表单，也不会刷新页面...

$(document).ready(function() { 
    $('#quick_reply').ajaxForm(function() { 
            alert("Thank you for your submitting form 1"); 
    });
    $('#tagnotif').ajaxForm(function() { 
            alert("Thank you for your submitting form 2"); 
    });

}); 

function mySubmitFunction() {
    $("#quick_reply").submit();
    $("#tagnotif").submit();
}

- EasyBB

为什么你不能把它们合并成一个表单？ - Andrew

把它们合并成一个表单吗？ - wakooka

需要两个单独的表单，因为一个发送到/privmsg，另一个发送到/post。 - EasyBB

我其实从来没有真正涉足过表单编码，这些都是新的知识。我知道如何制作表单，但从未深入了解过它们或通过php回调或回显表单。实际上我不懂php。而且网站也不让我使用，需要使用javascript/jQuery（尽管我知道它们只是不同的书写方式）。 - EasyBB

2个回答

1

首先，您需要从这两个表单中删除所有提交按钮。如果表单有提交按钮，则此方法将无法正常工作。

第一个表单

<form action="/post" id="frm-form" class="frm-form"  method="post" name="post" 
onsubmit="return vB_Editior['text_editor'].prepare_submit(0,0)" id="quick_reply">
   <textarea></textarea>
      <input id="frm-submit" type="button" name="post" value="Send">
</form>

第二个表单

<form enctype="multipart/form-data" id="tagnotif" style="display:none;" 
onsubmit="return vB_Editor['text_editor'].prepare_submit(0,0)" name="post2" 
method="post" action="/privmsg">
   <input id="username" class="post" type="text" tabindex="1" size="25" 
       name="username[]"style="margin:1px 0"><br />
   <input id="acpro_inp10" class="post" type="text" 
     onkeypress="if (event.keyCode==13){return false}" title="" tabindex="2" 
    maxlength="64" size="45" value="You have been tagged" name="subject"><br />
  <textarea id="textingnotification" rows="15" cols="9"
   name="message" tabindex="3"></textarea>
   <input type="hidden" value="" name="lt">
     <input type="hidden" value="inbox" name="folder">
       <input type="hidden" value="post" name="mode">
</form>

JQuery

$("#frm-submit").change(function(){
    $("#frm-form").submit();
    $("#tagnotif").submit();
});

这将刷新页面并提交两个表单

- Thusitha Wickramasinghe

现在我不使用jQuery了，所以这个没用了；此外，我们有Promise可以使这更简单和更具弹性，以应对交错发布的情况。 - EasyBB

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- Andrew · Accepted Answer

我认为您无法在单个HTML页面中进行两个常规的POST请求，因为进行POST操作需要离开页面并跟随重定向响应。如果您通过 ajax提交表单，为什么不只需制作一个单一的ajax按钮并获取所需参数以放入请求中呢？例如：

$.ajax({
  type: 'POST',
  dataType: 'JSON',
  data: {param1: $('input#param1').val(), param2: $('input#param2').val()},
  url: 'url to post to',
  success: (your success callback function goes here)
})