Get form data with Javascript/Jquery from dialoguebox

Question

I have a dialogue box like this

$("#dbSetting_div").dialog({
    height: 315,
    width: 500,
    autoOpen: false,
    modal: true,
    draggable: false,
    buttons: {
        "Save": function () {},
        "Add More": function () {
            l_i++;
            formHtml = "<div>";
            formHtml += "<form id='" + l_i + "'>";
            formHtml += "<label class = 'dbright'>DashBoard ID: </label><span class = 'dbleft'><select id='dashboard_id' class='dbSettingDD'><option>-------Select-------</option>" + dropDownDashboardName + "</select></br></span>";
            formHtml += "<label class = 'dbright'>Filtering parameter: </label><span class = 'dbleft'><select id='filter_by'><option>-------Select-------</option></select></br></span>";
            formHtml += "<label class = 'dbright'>Y-Axis: </label><span class = 'dbleft'><select id='yAxis'><option>-------Select-------</option></select></br></span>";
            formHtml += "<label class = 'dbright'>Chart Tiltle: </label><span class = 'dbleft'><input type='text' id='title'/></br></span>";
            formHtml += "<label class = 'dbright'>Chart Type: </label><span class = 'dbleft'><input type='text' id='chart_type'/></br></span>";
            formHtml += "<label class = 'dbright'>Main Chart: </label><span class = 'dbleft'><input type='radio' name='mainchart' value='yes'/>Yes <input type='radio' name='mainchart' value='No'/>No</br></span>";
            formHtml += "</form>";
            formHtml += "</div>";
            $("#dbSetting_div").append("<p>" + formHtml + "</p>");
            console.log(scroll);
        }
    }
}).css("font-size", "12px");

I was trying to serialize the output of this dialogue box as json

$("div form").each(function(){
console.log( $(this).serialize() );
});

I tried including the above code in the save button function, but the output in the console is blank.

I'm not getting any errors.

How to get form data with Javascript/Jquery

JSBin

Answer 1

i got with the solution, have a look here Fiddle

If you look at the console, you will get the result.

"Save": function () {
        var data = new Object();
        $("div form :input").each(function () {
            data[$(this).attr("id")] = $(this).val();
        });
        console.log(data);
    },