How to using eq() while dealing in Div tag

I am having this following HTML code,

<div >
    <div >
        <span >Title</span>
        <div >
            <input type="text" placeholder="Write Something here.." />
            <button  type="button">
                <i ></i>
            </button>
            <div style="display: inline-flex; margin-bottom: 22px;">
            <select data-placeholder="Allow In Search" id="input_data1" style="width: 70%; margin-right: 10px;">
            <option value="">Level</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
            <select data-placeholder="Allow In Search" id="input_data2" style="width: 70%; margin-right: 10px;">
            <option value="">Level</option>
            <option value="I">I</option>
            <option value="II">II</option>
            <option value="III">III</option>
        </select>
    </div>
        </div>
    </div>
    <div >
        <div ></div>
    </div>

    <div >
        <button type="submit">Update</button>
    </div>
</div>

Where I am having one textbox in the first row and two combo boxes in the second row. When the user will click on plus icon, another textbox in the first row and two combo boxes in the second row will get generated and added. User can generate as many as they wants (1 textbox and 2 combo boxes) via clicking on the add icon. To get the whole values from the generated div tag, I wrote the following code,

$("#form_id_name").submit(function(e){
    e.preventDefault();
    var json_data = [];

    $(".add_all").each(function(){
        title = $(this).children().eq(0).find('input').val();
        level_no =  $(this).children().eq(0).find("option:selected").text();
        level_ro =  $(this).children().eq(1).find("option:selected").text();
        json_data.push(single_data);
        var single_data = {"title":title, "level_no":level_no, "level_ro":level_ro}
    });
    var string_data = JSON.stringify(json_data);
    console.log(string_data);

    *ajax code*

But this code doesn't help me to get the desired output that I want. Can you help me out to know where I am doing it wrong ? Thanks.

CodePudding user response：

I believe you're using too many methods to access the DOM elements, this code is a simplified version, I tested it in codepen and returns:

$("button").click(function (e) {
  e.preventDefault();
  var json_data;

  $(".add_all").each(function () {
    title = $(this).find("input").val();
    level_no = $(this).find("option:selected:first").text();
    level_ro = $(this).find("option:selected:last").text();

    json_data = { 
      title: title, 
      level_no: level_no, 
      level_ro: level_ro 
    };
  });
  json_data = JSON.stringify(json_data);

  console.log(json_data);
});

// "{'title':'my title','level_no':'1','level_ro':'III'}"

CodePudding user response：

It looks like you're pushing single_data onto json_data before assigning it a value. Due to hoisting, single_data gets declared at the top of the function - so it's defined and you won't get an error. But, you also won't get your data.

Change

json_data.push(single_data);
var single_data = {"title":title, "level_no":level_no, "level_ro":level_ro}

to just

json_data.push({"title":title, "level_no":level_no, "level_ro":level_ro});

Also, you could clean up the code a bit by adding classes to your inputs & selects. So this:

title = $(this).children().eq(0).find('input').val();

could be simplified to this:

title = $(this).find(".titleinput").val();

It'll also be more robust if you change the underlying markup.