如何从动态输入字段添加数字?

时间:2013-12-16 03:04:06

标签: javascript php html forms

我现在基本上正在制作表格。但我的表单有“添加”和“删除”按钮以容纳额外的字段。现在,其中一个字段是“总预算”字段。

我要将所有输入字段发送到另一个页面。但是,我希望能够从所有“总预算”字段中累计完整的总金额。 (请注意,总预算字段有一个,但用户可以“添加”/“删除”,可能会有更多)。

当我将它传递到下一页时,我想单独传递它们,并保留它们以便显示。在下一页将有一个额外的“最终总金额”,我将显示它。

另外,我正在使用基础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>

2 个答案:

答案 0 :(得分:2)

假设总预算中的值不是string而您不需要从货币前缀等处解析它......:

var totalBudget = 0;


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

答案 1 :(得分:1)

您的HTML

中可能有一个“总计”隐藏输入字段
<input type="hidden" id="grand-total" name="grand-total"/> 

转到下一页时,您可以使用其他输入值传递其值

在“总预算”class="total-budget"字段中添加input,并计算总计

的javascript函数
function computeGrandTotal() {    
    var grandTotal = 0;
    $(".total-budget").each(function () {
        var total = $(this).val();
        if ($.isNumeric(total)) {                
            grandTotal += parseFloat(total);
        }
    });
    $('#grand-total').html(grandTotal);
}

转到下一页时触发computeGrandTotal()功能

<a onclick="computeGrandTotal()" href="#">Go to next page</a>

jsfiddle