jQuery多表单提交

jQuery Multiple Forms Submit

本文关键字：表单提交 jQuery      更新时间：2023-09-26

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

有什么更简单的方法吗？

这是不可能的。您可以使用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() {
       // ...
   });
});

好的，我无法从form4中获取.serialize（）来处理复选框数组，例如

<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和form3上方form1曾经所在的位置。

在上面放置一个javascript：

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

移动文本输入和提交按钮，使其相对于占位符div.处于绝对和相对位置

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

相关文章：