Question

我正在创建一个脚本，该脚本获取字段的值并将它们放入表中进行验证。但事实是，用户可以添加多个字段（最多5个），每个字段都有自己的ID。因此，当用户输入值时，我希望我的脚本从该字段中获取所有值（即使它们已添加）并将它们传递到表中。我该怎么做呢？ 用户添加一个'设置'，点击添加图表 User adds one 'set'

用户添加了另一个“设置”（最多5个）。 Adds another set

当用户添加了他/她想要的所有“套装”时，它们会显示在Jeppeson Charts部分中。 enter image description here
我需要获得这些值

<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>

允许用户添加最多5个不同的图表。

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();
    })

需要添加图表的表格

<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>

我希望我的漫无边际感觉合情合理。如果没有，请告诉我，我会尽力澄清。我也知道如何使用MySQL和PHP来做到这一点，我希望避免使用这个特殊功能。但是，如果我需要，我会。

Answer 1

您应该为每个字段添加一个类，也可以添加一个类。此外，您需要将所有三个相关的fieldset包装在一个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>

然后你可以逐个查看所有的设置并获得这样的值，然后用它们做你想做的事情：

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

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

1 个答案: