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

我的页面设计是这样的，我必须使用两个表单，单击提交，然后保存到数据库，反之亦然。 我在使用Struts2 Framework的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：

  
 <input type="radio" id="I" value="I" checked name="pSB.rOS" />I V <input type="radio" id="R" value="R"checkedname="pSB.rOS" />Regular Visit <input type="radio" id="P/N" checkedname="pSB.rOS" />Re- Evaluation <input type="radio" id="D/N"checked name="pSB.rOS" />Discharge 
  

我的表2：

  
 <input type="radio" id="new" value="n"checked name="pSB.r2" /> New <input type="radio" id="noChange" value="nC" checked name="pSB.r2" />No Change <input type="radio" id="progressing" value="p"checked name="pSB.r2" />Progressing <input type="radio" id="notProgressing" value="nP" checked name="pSB.r2" />Not Progressing 
  

这是我更新的已提交按钮。 从Div中移除并放置在桌子内。

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

Answer 1

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

formIds：

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

Answer 2

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

JavaScript的：

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

提交按钮：

Answer 3

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

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