Question

我试图用几种＆＃34;子形式制作手风琴＆＃34;在里面。移动到下一个面板后，我想在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();

jQueryUI手风琴有多种形式

1 个答案: