使用javascript获取多个字段的值并将其添加到表中

Question

I'm creating a script that takes the values of the fields and places them into a table for verification. The thing is though, the user is able to add multiple fields(up to 5) and each field has its own id. So, when a user inputs the values I want my script to take all the values from that field(even if they've added) and pass them into the table. How would I go about doing this? User adds one 'set', clicks add chart

User adds another 'set'(up to 5).

When the user has added all the 'sets' he/she wants, They appear in the Jeppeson Charts section.
I need to get these values

<div id="charts">
    <h3>Jeppeson Charts</h3>
    <fieldset>
        <label>Airport Identifier</label>
        <input type="text" name="air_id_1" id="air_id_1" />
    </fieldset>
    <fieldset>
        <label>Chart Identifier</label>
        <input type="text" name="chart_id_1" id="chart_id_1" />
    </fieldset>
    <fieldset>
        <label>Chart Description</label>
        <input type="text" name="chart_desc_1" id="chart_desc_1" />
    </fieldset>
</div>

Allows the user to add up to 5 different charts.

var jep_num = 1;
    $("#add_chart").on("vclick", function(ev){
        jep_num += 1;
        if(jep_num <= 5){
            $("#charts").append("<fieldset><input type='text' name='air_id_" +jep_num +"' id='air_id_" +jep_num +"' /></fieldset><fieldset style='margin-left: 0.45%'><input type='text' name='chart_id_" +jep_num +"' id='chart_id_" +jep_num +"' /></fieldset><fieldset style='margin-left: 0.4%'><input type='text' name='chart_desc_" +jep_num +"' id='chart_desc_" +jep_num +"' /></fieldset>").trigger("create");
        }
        ev.preventDefault();
    })

Table where the charts need to be added

<div class="full">
    <div class="header">JEPPESON CHARTS</div>
</div>
<div class="half">
    <div class="half">
        <div id="air_id_field" class="table_field"></div>
    </div>
    <div class="half">
        <div id="chart_id_field" class="table_field"></div>
    </div>
</div>
<div class="half">
    <div class="full">
        <div id="chart_desc_field" class="table_field"></div>
    </div>
</div>

I hope I made sense with my rambling. If not, let me know and I'll try to clarify. I also know how to do this using MySQL and PHP, and I was hoping to avoid doing so with this particular feature. But, if I need to I will.

Answer 1

You should add a class to each field and the added ones too. Also you need to wrap all three related fieldset in one div.

<div id="charts">
     <h3>Jeppeson Charts</h3>

    <div class="charts-fieldset">
        <fieldset>
            <label>Airport Identifier</label>
            <input class="air-input" type="text" name="air_id_1" id="air_id_1" />
        </fieldset>
        <fieldset>
            <label>Chart Identifier</label>
            <input class="chart-input" type="text" name="chart_id_1" id="chart_id_1" />
        </fieldset>
        <fieldset>
            <label>Chart Description</label>
            <input class="chart-desc-input" type="text" name="chart_desc_1" id="chart_desc_1" />
        </fieldset>
    </div>
</div>

Then you can go through all of your sets one by one and get the values like that and then do what you want with them:

$('.charts-fieldset').each(function () {
    var air = $('.air-input', $(this)).val();
    var chart = $('.chart-input', $(this)).val();
    var chartDesc = $('.chart-desc-input', $(this)).val();
});