使用带有 Ajax 的单个提交按钮在 JSP 中提交两个 HTML 表单答案

【问题标题】：Submit two HTML forms in JSP using single submit button with Ajax使用带有 Ajax 的单个提交按钮在 JSP 中提交两个 HTML 表单
【发布时间】：2013-03-20 15:19:27
【问题描述】：

我的页面设计是这样的，我必须使用两个单击提交然后保存到数据库的表单，反之亦然。

我在一个带有 Struts 2 框架的 JSP 页面上使用它。我已经尝试过 Ajax 解决方案，但它们对我不起作用。

这是我的脚本（已更新）：

$("#visitType").buttonset();
$("#patientCondition").buttonset();
$("input[type=submit], a, button").button().click(function(event) {
  event.preventDefault();
  var inputs=$('#visitType,#patientCondition ').find(':input').not(this);
  var form_data={};
  inputs.each(function(){
    form_data[this.name]=$(this).val();
  });
  $.post('patientSoapAll',  form_data, function(response){  
  });
});

我的表格1：

<s:form action="PatientSoapAll" method="post">

        <div id="visitType">
            <input type="radio" id="I" value="I" <s:if test='pSB.rOS == "I"'>checked</s:if> name="pSB.rOS" /><label for="I">I V</label> 
            <input type="radio" id="R" value="R"<s:if test='pSB.rOS == "R"'>checked</s:if>name="pSB.rOS" /><label for="R">Regular   Visit</label> 
            <input type="radio" id="P/N" <s:if test='pSB.rOS == "P/N"'>checked</s:if>name="pSB.rOS" /><label for="D/N">Re- Evaluation</label> 
            <input type="radio" id="D/N"<s:if test='pSB.rOS == "D/N"'>checked</s:if> name="pSB.rOS" /><label for="
    
    P/N">Discharge</label>
    </div>
</s:form>

我的表格2：

<s:form action="PatientSoapAll" method="post">

    <div id="patientCondition">
        <input type="radio" id="new" value="n"<s:if test='pSB.r2 == "n"'>checked</s:if> name="pSB.r2" /> <label for="new">New</label>
        <input type="radio" id="noChange" value="nC" <s:if test='pSB.r2 == "nC"'>checked</s:if> name="pSB.r2" /><label for="noChange">No Change</label> 
        <input type="radio" id="progressing" value="p"<s:if test='pSB.r2 == "p"'>checked</s:if> name="pSB.r2" /><label for="progressing">Progressing</label> 
        <input type="radio" id="notProgressing" value="nP" <s:if test='pSB.r2 == "nP"'>checked</s:if>   name="pSB.r2" /><label for="notProgressing">Not Progressing</label>
    </div>
</s:form>

这是我的更新提交按钮。从<div> 中删除并放置在表格中。

<tr>
  <td></td>
  <td><input type="submit" value="Save Note" /></td>
</tr>

我正在使用 Struts 2，我想将此提交按钮重定向到操作 PatientSoapAll。我正在使用.do 的自定义扩展名而不是.action（默认情况下）。请告诉我如何将此提交按钮重定向到 Struts 2 中的相应操作类。

【问题讨论】：

你不能重复提交
WTQ？为什么需要提交两份表格？
@RomanC：因为我有显示模式，所以我必须在页面顶部使用一些细节以及在 jquery 选项卡中使用其他细节。还有各种选项卡，每次选择都会产生不同的组合。它就像从顶部选择+从一个选项卡中选择会给我一个特殊的数据库条目。希望现在清楚了。
我不明白表单提交或操作不起作用的原因是什么？
两种表单都没有被提交，只有在 jquery 选项卡中的一个被提交。上面的不是。

标签： java jquery jsp struts2 double-submit-problem

【解决方案1】：

您可以使用 Struts2 jQuery 提交多个表单

<sj:submit formIds="visitType,patientCondition" targets="result" value="Submit" />

formIds：

表单ID的逗号分隔列表，在单击此元素时在提交期间序列化所有字段（如果多个表单具有重叠的元素名称，则不确定将使用哪个）

【讨论】：

不，是Struts2 jQuery plugin，这是struts2 的官方支持ajax 的插件。
我试过了，但是点击这个提交按钮后什么都没有发生（没有调用任何操作）按钮已经死了。

【解决方案2】：

找到了一个简单的解决方案。

javascript：

submitForms = function() {
  $('#form2 :input').not(':submit').clone().hide().appendTo('#form1');
    document.getElementById("form1").submit();
};

提交按钮：

<input type="button" value="Save Note" onclick="submitForms()" />

【讨论】：

【解决方案3】：

你可以使用 jQuery .serialize 来做你想做的事。为您的表单提供一些类，然后使用它来选择您的表单并调用 serialize 以获取标准 URL 编码表示法的字符串。之后，您可以使用一些 AJAX 方法将其发布到您的操作中。

$(function() {
  $("#saveNoteButton").click(function() {
    alert($(".forms").serialize());
  });
});

【讨论】：

@user3629339：为什么不应该这样做？来试试吧。