javascript - 如何从动态输入字段添加数字？

Question

我现在主要是在处理表格。但是我的表单有“添加”和“删除”按钮以容纳额外的字段。现在，其中一个字段是“总预算”字段。

我要将所有输入字段发送到另一个页面。但是，我希望能够将所有“总预算”字段中的完整总额相加。 (请记住，只有一个总预算字段，但用户可以“添加”/“删除”并且可以有更多)。

当我将它传递到下一页时，我想将它们单独传递，并保持原样以供显示。在下一页上会有一个额外的“最终总金额”，我将显示它。

此外，我使用的是 foundation 5(不确定这是否重要)。

现在，我不确定该怎么做。有人可以指出我正确的方法吗？这是我的标记的样子:

JavaScript:

<script>
        $(document).ready(function() {
            $(".add").on('click', function() {
                var linehtml = $('.line').html();
                var total = $('.line').length;
                var dele = (total - 1);
                $('#linecont').append('<div class="line"><hr />'+linehtml+'</div>');
                return false;
            });

            $(".del").on('click', function() {
                var linecont = $("#linecont");
                var total = linecont.find('.line').length;
                var dele = (total - 1);
                if(total === 1) {
                    return false;
                }
                $('.line').eq(dele).remove();
                return false;
            });
        });
   </script>

HTML:

<div align="center">
        <a href="#" class="button add">Add Line</a>
        <a href="#" class="button del">Delete Line</a>
        <div style="width: 40%; margin:0 auto">
            <label>Campaign Name</label>
                <input type="text" placeholder="Campaign Name:"  />
        </div>
    </div>

    <div id="linecont">
        <div class="line">
            <div class="row">
                <div class="large-6 columns">
                    <label>Status:</label>
                        <select>
                            <option value="New">New</option>
                             <option value="Changed">Changed</option>
                        </select>

                    <label>Product:</label>
                        <select>
                            <option value="Mobile">Mobile</option>
                            <option value="Social">Social</option>
                            <option value="Online">Social</option>
                        </select>

                    <label>Model:</label>
                        <select>
                            <option value="CPC">CPC</option>
                            <option value="CPI">CPI</option>
                            <option value="CPM">CPM</option>
                            <option value="CPA">CPA</option>
                            <option value="CPD">CPD</option>
                        </select>

                    <label>Unit Rate:</label>
                            <input type="text" placeholder="Just type amount">
                </div>

                <div class="large-6 columns">
                    <label>URL Link:</label>
                        <input type="text" placeholder="URL Link"  />
                    <label>Targeting Info:</label>
                            <input type="text" placeholder="Target Info">
                    <label>Total Budget:</label>
                            <input type="text" placeholder="Total Budget">
                    <label>Daily Budget:</label>
                            <input type="text" placeholder="Daily Budget">
                </div>
            </div>

            <div style="width: 40%; margin:0 auto">
                <label>Total Units:</label>
                    <input type="text" placeholder="Total Units">
            </div>

            <div class="row">
                <div class="small-2 columns">
                    <label>Start Month:</label>
                        <select>
                            <option value="Jan">Jan</option>
                            <option value="Feb">Feb</option>
                            <option value="March">March</option>
                            <option value="April">April</option>
                            <option value="May">May</option>
                            <option value="June">June</option>
                            <option value="July">July</option>
                            <option value="Aug">Aug</option>
                            <option value="Sept">Sept</option>
                            <option value="Oct">Oct</option>
                            <option value="Nov">Nov</option>
                            <option value="Dec">Dec</option>
                        </select>
                </div>

                <div class="small-2 columns">
                    <label>Day:</label>
                        <select>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="2">3</option>
                            <option value="3">4</option>
                            <option value="4">5</option>
                            <option value="4">6</option>
                            <option value="5">7</option>
                            <option value="6">8</option>
                            <option value="7">9</option>
                            <option value="8">10</option>
                            <option value="9">11</option>
                            <option value="11">12</option>
                            <option value="12">13</option>
                            <option value="13">14</option>
                            <option value="14">15</option>
                            <option value="15">16</option>
                            <option value="16">17</option>
                            <option value="17">18</option>
                            <option value="18">19</option>
                            <option value="19">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                            <option value="25">25</option>
                            <option value="26">26</option>
                            <option value="27">27</option>
                            <option value="28">28</option>
                            <option value="29">29</option>
                            <option value="30">30</option>
                            <option value="31">31</option>
                        </select>
                </div>

                <div class="small-2 columns">
                    <label>Year:</label>
                        <input type="text" placeholder="Type in Year"  />
                </div>

                <div class="small-2 columns">
                    <label>End Month:</label>
                        <select>
                            <option value="Jan">Jan</option>
                            <option value="Feb">Feb</option>
                            <option value="March">March</option>
                            <option value="April">April</option>
                            <option value="May">May</option>
                            <option value="June">June</option>
                            <option value="July">July</option>
                            <option value="Aug">Aug</option>
                            <option value="Sept">Sept</option>
                            <option value="Oct">Oct</option>
                            <option value="Nov">Nov</option>
                            <option value="Dec">Dec</option>
                        </select>
                </div>

                <div class="small-2 columns">
                    <label>Day:</label>
                        <select>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="2">3</option>
                            <option value="3">4</option>
                            <option value="4">5</option>
                            <option value="4">6</option>
                            <option value="5">7</option>
                            <option value="6">8</option>
                            <option value="7">9</option>
                            <option value="8">10</option>
                            <option value="9">11</option>
                            <option value="11">12</option>
                            <option value="12">13</option>
                            <option value="13">14</option>
                            <option value="14">15</option>
                            <option value="15">16</option>
                            <option value="16">17</option>
                            <option value="17">18</option>
                            <option value="18">19</option>
                            <option value="19">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                            <option value="25">25</option>
                            <option value="26">26</option>
                            <option value="27">27</option>
                            <option value="28">28</option>
                            <option value="29">29</option>
                            <option value="30">30</option>
                            <option value="31">31</option>
                        </select>
                </div>

                <div class="small-2 columns">
                    <label>Year:</label>
                        <input type="text" placeholder="Type in Year"  />
                </div>
            </div>
        </div>
    </div>
  <hr>

Answer 1

假设 Total Budget 中的值不是 string 并且您不需要将其从货币前缀等中解析出来...:

var totalBudget = 0;


$("input[placeholder='Total Budget']").each(function() {
    totalBudget += $(this).val();
});