CODEWITHSUNDEEP
jqueryformsjquery-ui
thebarless
thebarless

Reputation: 472

jQueryUI Accordion with multiple forms

I'm trying to build an accordion with several "sub-forms" in it. Upon moving to the next panel, I want to submit the form fields in the oldPanel. There can be up to nine accordion sections, and therefore up to nine separate html forms with a metric buttload of input fields in each form.

When I click from header 1 to header 2 the very first time, it works (as scripted anyways - still having trouble getting the form's content to serialize). When I click from header 2 back to 1, form becomes an empty object. How can I submit the form in each respective panel upon the closure of that panel?

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>

Upvotes: 1

Views: 1381

Answers (1)

Mihai Dinculescu
Mihai Dinculescu

Reputation: 20033

First things first, you should put name attributes on your form fields. Serialization uses the field's name not id.

Then you can serialize the form using the serializeArray() function like this:

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

Upvotes: 1

Related Questions