结合两个 html 表单（一个在 JSP 页面顶部，另一个在 jQuery 选项卡内）？ [复制]答案

【问题标题】：Combining two html forms (one on top of JSP page, other inside jQuery tab)? [duplicate]结合两个 html 表单（一个在 JSP 页面顶部，另一个在 jQuery 选项卡内）？ [复制]
【发布时间】：2013-03-20 15:46:54
【问题描述】：

我有两个简单的表单，我想在单击 jQuery 选项卡内的单个提交时将数据保存在这两个表单上。

我已经读过，结合 2 个表单比为这些表单使用单个提交按钮更好。我正在使用 Strut2，它们都进入同一个动作类。我不知道如何组合位于两个不同位置的两种表单。

如果您需要代码，请发表评论。

【问题讨论】：

如何提交？ AJAX 还是浏览器默认？
普通提交按钮<input type="submit" value="Save Note" id="saveNoteButton" />
详情请访问link
AJAX 可以吗？将 2 个表单序列化为一个提交对象相当容易。默认提交需要组合成一种形式（也不是很困难）。没有 AJAX 的两个表单调用 submit() 的问题是第二次提交将被第一个表单的重定向阻止，因此只有第一个表单会被提交
如果需要更多帮助...将两种形式的实时 html 放入 jsfiddle.net 演示中

标签： jquery forms jquery-ui jsp

【解决方案1】：

要通过 AJAX 发送数据，可以做以下操作，只需相应地调整表单的 ID：

$('#saveNoteButton').click(function(evt){
    evt.preventDefault();/* prevent browser default submit*/
    var inputs=$('#form1,#form2').find(':input').not(this);
    var form_data={};
    inputs.each(function(){
        var $this=$(this)
        if( $this.is(':radio') && !this.checked){
            return;
        }
        form_data[this.name]=$this.val();
    });

    /* now send via AJAX*/
  $.post('/path/To/Server/',  form_data, function(response){  
        // do something with server response here
    });/* if return json add datatype argument, see docs*/


});

演示：http://jsfiddle.net/HnyYe/1

已更新 - 仅针对已检查的无线电进行调整

【讨论】：