jQuery 多表单提交答案

【问题标题】：jQuery Multiple Forms SubmitjQuery 多表单提交
【发布时间】：2014-11-08 00:34:14
【问题描述】：

我在一个页面上有 4 个表单。我知道表单不能嵌套。

<form id="form1"></form>

<form id="form2"></form>

<form id="form3"></form>

<form id="form4"></form>

按此顺序呈现。

表格 1 和表格 4 发布到同一个 php 页面进行处理。表格 1 有 1 个输入字段表单 4 有多个字段、复选框和选择。

表格 1 或表格 4 发送两种表格的组合字段的最佳方法是什么？

我尝试过 jQuery，它非常适合文本输入和复选框，但无法让它与 Select 一起使用。尝试将表格1和表格4组合并使用css重新定位表格1，但无法正确布局。

有没有更简单的方法可以做到这一点？

【问题讨论】：

标签： php javascript jquery html

【解决方案1】：

这是不可能的。您可以使用serialize() 或serializeArray() 方法获取表单的数据并使用Ajax 将它们发布到服务器：

将一组表单元素编码为字符串以供提交。

$('#send').click(function() {
   var firstFormData  = $('form:eq(0)').serializeArray();
   var fourthFormData = $('form:eq(3)').serializeArray();
   $.ajax({
        url  : '...',
        type : 'post',
        data : firstFormData.concat(fourthFormData)
   }).done(function() {
       // ...
   });
});

【讨论】：

@undefined 谢谢，实际上 .serialize 是我尝试过的第一件事。似乎没有捕获复选框数组。然后我尝试了： $('#form4 :input').not(':submit').clone().hide().appendTo('#form1');这适用于所有输入，但不适用于

【解决方案2】：

好的，我无法让 .serialize() 使用 form4 中的复选框数组，例如

<input type="checkbox" id="model[]">

我试图获取检查的值，但无法让它们与其他输入一起序列化：

var vals = []
    $('input:checkbox[name="model[]"]').each(function() {
        if (this.checked) {
            vals.push(this.value);
        }
    });

所以我回去做了更简单的事情：

删除了form1，将文本输入和提交按钮移到了form4内的<div id="searchbox" style="position:abosulte;top:-100px;left:0px;">My original form1</div>内。

将占位符<div id="placeholder" style="position:relative;"></div> 放在 form2 和 3 之前 form1 的位置。

在上面放置一个javascript：

$(document).ready(function(){
    $("#searchbox")
    .appendTo("#placeholder");
});

移动文本输入和提交按钮以将它们定位为绝对和相对于占位符 div。

通过这种方式，我将它们简化为 1 种形式（这就是它的意图），不依赖 javascript 来操作任何数据，并且不需要我对两种形式进行串联序列化。

【讨论】：