How to add numbers from dynamic input fields?

Question

I'm basically working on a form right now. But my form has "add" and "delete" buttons to accommodate extra fields. Now, one of the fields is a "total budget" field.

I'm going to send all input fields to another page. But, I want to be able to add up complete total amount from all "total budget" fields. (Keep in mind, there is one total budget field, but the user can "add"/"delete" and there could be more).

When I pass it to the next page, I want to pass them individually, and keep them as so for display. On the next page there will be an extra "final total amount" which I will display that.

Also, I'm using foundation 5 (Not sure if that matters).

Now, I'm not sure how to do this. Can some one point me towards the right way? Here's what my mark up looks like:

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>

hammus · Accepted Answer · 2013-12-16 03:45:39Z

2

Assuming the value in Total Budget is not a string and you dont need to parse it away from currency prefixes etc...:

var totalBudget = 0;


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

edited Dec 16, 2013 at 3:45

answered Dec 16, 2013 at 3:15

hammus

2,6222 gold badges21 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ebad Saghar Over a year ago

Actually, it's not a float. It will be an INT.

Ebad Saghar Over a year ago

Also, I see you used a "form" in the jQuery, I am not using any "form" tags in my HTML. When I said Form, I meant a visual form, not the HTML kind.

Ebad Saghar Over a year ago

I don't have a "submit" button either. It's gonna be an anchor button to call the next page..

hammus Over a year ago

Re: Float not Int -> thats no problem. Re: Form thats fine, if you remove the $form.submit() wrapper and the preventDefault() this will work.

Aurélien Gasser · Accepted Answer · 2013-12-16 03:41:45Z

1

You could have a "Grand Total" hidden input field in your HTML

<input type="hidden" id="grand-total" name="grand-total"/>

You can pass its value with the other input values when you go to the next page

Add a class="total-budget" to the "Total Budget" input fields, and a javascript function which calculates the grand total

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

Trigger the computeGrandTotal() function when you go to the next page

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

jsfiddle

edited Dec 16, 2013 at 3:41

answered Dec 16, 2013 at 3:31

Aurélien Gasser

3,1201 gold badge23 silver badges25 bronze badges

1 Comment

Ebad Saghar Over a year ago

I don't need it to be real time display. the Grand total would be displayed in the next page.

Collectives™ on Stack Overflow

How to add numbers from dynamic input fields?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related