8

我在一个页面上有 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，但无法正确布局。

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

4

2 回答 2

11

这是不可能的。您可以使用serialize()orserializeArray()方法获取表单数据并使用 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() {
       // ...
   });
});
于 2012-07-07T08:02:52.117 回答
0

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

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

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

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

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

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

<div id="placeholder" style="position:relative;"></div>在 form1 曾经所在的 form2 和 3 上方放置一个占位符。

在上面放置一个javascript：

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

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

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

于 2012-07-08T05:00:11.367 回答