具有多种形式的 jQueryUI 手风琴

Question

我正在尝试构建一个包含多个“子形式”的手风琴。转到下一个面板后，我想在 oldPanel 中提交表单字段。最多可以有九个手风琴部分，因此最多可以有九个单独的 html 表单，每个表单中都有一个公制的输入字段。

当我第一次单击标题 1 到标题 2 时，它可以正常工作（无论如何都是脚本 - 仍然无法让表单的内容序列化）。当我从标题 2 单击回到 1 时，表单变成了一个空对象。在各个面板关闭后，如何在各个面板中提交表单？

JS

$(function () {
  $("#accordionSubmit").accordion({
    collapsible: true,
    beforeActivate: function (event, ui) {
        var tbl = $('#accordionSubmit').data('table');
        var form = $(ui.oldPanel).find('form'); //.serialize();

        $.ajax({
            type: "POST",
            url: "ajax.php",
            data: form,
            success: function (data) {
                $(ui.newPanel).html(data);
                console.log(form);

            },
            error: function (xhr, status, error) {
                //var err = eval("(" + xhr.responseText + ")");
                alert("Nope");
            }
        });
    }
  });
});

HTML

  <div id="accordionSubmit" class="accordionSubmit" data-table="jto-submit">
    <h3>Header Name 1</h3>

<div>
    <form name="form" id="a">
        <input type="hidden" id="stuff" value="YAY">
        <input type="hidden">
    </form>Contents</div>
    <h3>Header Name 2</h3>

<div>
    <form name="form" id="b">
        <input type="hidden" id="stuff1" value="YAY1">
        <input type="hidden">
    </form>
</div>

Answer 1

首先，您应该在表单字段中添加name 属性。序列化使用字段的name 而不是id。

然后你可以像这样使用serializeArray()函数序列化表单：

var form = $(ui.oldPanel).find('form').serializeArray();