Adding looped variables in Jquery and storing in input field

Question

I know nothing about Javascript/Jquery etc but using Google and people answers I am using the following to add x number of fields together and showing in a subtotal box.

The following script loops so each time you see a 1 that will increment each loop count. Meaning the totals for each count are displayed, editing any number will only update that section total.

var $form = $('#locations'),
    $summands1 = $form.find('.addme1'),
    $sumDisplay1 = $('#incoming1');

$form.delegate('.addme1', 'change', function () {
    var sum = 0;
    $summands1.each(function () {
        var value = Number($(this).val());
        if (!isNaN(value)) sum += value;
    });

    $sumDisplay1.val(sum);

    $summandsa1 = $form.find('.addmea1'),
    $sumDisplaya1 = $('#outgoing1');
});
$form.delegate('.addmea1', 'change', function () {
    var sum = 0;
    $summandsa1.each(function () {
        var value = Number($(this).val());
        if (!isNaN(value)) sum += value;
    });

    $sumDisplaya1.val(sum);
});

This is an example form

    <form id="locations" method='post' action=''>Loop 1
        <br>
        <input type="text" value="75" name="" class="addme1">
        <input type="text" value="150" name="" class="addmea1">
        <br>
        <input type="text" value="75" name="" class="addme1">
        <input type="text" value="150" name="" class="addmea1">
        <br>
        <input type="text" value="75" name="" class="addme1">
        <input type="text" value="150" name="" class="addmea1">
        <br>
        <input type="text" value="75" name="" class="addme1">
        <input type="text" value="150" name="" class="addmea1">
        <br>
        <input type="text" value="300" name="" id="incoming1">
        <input type="text" value="600" name="" id="outgoing1">
        <br>Loop 2
        <br>
        <input type="text" value="75" name="" class="addme2">
        <input type="text" value="150" name="" class="addmea2">
        <br>
        <input type="text" value="75" name="" class="addme2">
        <input type="text" value="150" name="" class="addmea2">
        <br>
        <input type="text" value="75" name="" class="addme2">
        <input type="text" value="150" name="" class="addmea2">
        <br>
        <input type="text" value="75" name="" class="addme2">
        <input type="text" value="150" name="" class="addmea2">
        <br>
        <input type="text" value="300" name="" id="incoming2">
        <input type="text" value="600" name="" id="outgoing2">
        <br>
        <br>
        <br>Total :
        <input type="text" value="600" name="" id="totalin">
        <input type="text" value="1200" name="" id="totalout"><br>
Profit :
        <input type="text" value="600" name="" id="profit">
    </form>

What I need is a way of adding the incoming1 incoming2 plus any other incomingx values there are and storing in totalin, likewise with outgoing1,2etc then having the profit update with totalout-totalin. So if a value is changed from what they are currently set it will automatically update all the other fields.

Can anyone help with this?

Fiddle here : http://jsfiddle.net/Gt473/3/ Note that loop 2 doesn't work as I am not sure how to repeat the script on jsfiddle but it does work on the html page.

"I know nothing about Javascript/Jquery" So, maybe it's time starting to learn... Or show us where you are stuck by providing what you have tried. SO is not please-code-it.com — A. Wolff, Sep 26 '13 at 09:32
Yes I agree, I definitely need to start learning but I am up against it with regards to time :( — g4shallow, Sep 26 '13 at 09:34
Sorry for not being clear @gurminder-singh. If you view the jsfiddle you can see the form, the input fields may loop any number of times down the page and the totals show per loop. I need to add the totals boxes up to show a summary at the bottom of the form. — g4shallow, Sep 26 '13 at 09:40
I am not expecting someone to code it for me @a-wolff just maybe point me in the right direction ;) thanks for the advice I will do more research. — g4shallow, Sep 26 '13 at 09:51
@g4shallow This is certainly doable but I think you need to invest some time in learning jquery/javascript. I think the situation you are in now is the right time for you to get started. The JS code you have provided certainly won't work. This link might give you some idea http://stackoverflow.com/questions/1481152/jquery-how-to-detect-a-textboxs-content-has-changed — manraj82, Sep 26 '13 at 09:52
@manraj82 I agree, I do need to invest some time in learning javascript. The code works in the fact that it updates the sub totals boxes on the page for each loop count so I imagine I need to retrieve the variables $sumDisplay1 and $sumDisplay2 etc add them together and store in the field with the totalin id. — g4shallow, Sep 26 '13 at 10:00

score 0 · Accepted Answer · answered Sep 26 '13 at 12:53

I am not sure what your requirement was.But this is my take on it, the answer I posted mighty not what you are looking for.And also the code below can be written better but that's for you to research.

<form id="locations" method='post' action=''>
        <fieldset class="level">
            <legend>Loop1</legend>
            <label>Incoming</label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label>Outgoing</label>
            <br>
            <input type="text" value="" name="" class="incoming">
            <input type="text" value="" name="" class="outgoing">
            <br>
            <input type="text" value="" name="" class="incoming">
            <input type="text" value="" name="" class="outgoing">
            <br>
            <input type="text" value="" name="" class="incoming">
            <input type="text" value="" name="" class="outgoing">
            <br>
            <input type="text" value="" name="" class="incoming">
            <input type="text" value="" name="" class="outgoing">
            <br>
            <input type="text" value="" name="" class="subIncoming" disabled>
            <input type="text" value="" name="" class="subOutgoing" disabled>   
        </fieldset>
        <fieldset class="level">
            <legend>Loop2</legend>
            <label>Incoming</label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label>Outgoing</label>
            <br>
            <input type="text" value="" name="" class="incoming">
            <input type="text" value="" name="" class="outgoing">
            <br>
            <input type="text" value="" name="" class="incoming">
            <input type="text" value="" name="" class="outgoing">
            <br>
            <input type="text" value="" name="" class="incoming">
            <input type="text" value="" name="" class="outgoing">
            <br>
            <input type="text" value="" name="" class="incoming">
            <input type="text" value="" name="" class="outgoing">
            <br>
            <input type="text" value="" name="" class="subIncoming" disabled>
            <input type="text" value="" name="" class="subOutgoing" disabled>   
        </fieldset>
        <fieldset class="level">
            <legend>Loop3</legend>
            <label>Incoming</label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label>Outgoing</label>
            <br>
            <input type="text" value="" name="" class="incoming">
            <input type="text" value="" name="" class="outgoing">
            <br>
            <input type="text" value="" name="" class="incoming">
            <input type="text" value="" name="" class="outgoing">
            <br>
            <input type="text" value="" name="" class="incoming">
            <input type="text" value="" name="" class="outgoing">
            <br>
            <input type="text" value="" name="" class="incoming">
            <input type="text" value="" name="" class="outgoing">
            <br>
            <input type="text" value="" name="" class="subIncoming" disabled>
            <input type="text" value="" name="" class="subOutgoing" disabled>   
        </fieldset>
        <fieldset class="level">
            <legend>Loop4</legend>
            <label>Incoming</label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label>Outgoing</label>
            <br>
            <input type="text" value="" name="" class="incoming">
            <input type="text" value="" name="" class="outgoing">
            <br>
            <input type="text" value="" name="" class="incoming">
            <input type="text" value="" name="" class="outgoing">
            <br>
            <input type="text" value="" name="" class="incoming">
            <input type="text" value="" name="" class="outgoing">
            <br>
            <input type="text" value="" name="" class="incoming">
            <input type="text" value="" name="" class="outgoing">
            <br>
            <input type="text" value="" name="" class="subIncoming" disabled>
            <input type="text" value="" name="" class="subOutgoing" disabled>   
        </fieldset>
        <fieldset class="level">
            <legend>Loop5</legend>
            <label>Incoming</label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label>Outgoing</label>
            <br>
            <input type="text" value="" name="" class="incoming">
            <input type="text" value="" name="" class="outgoing">
            <br>
            <input type="text" value="" name="" class="incoming">
            <input type="text" value="" name="" class="outgoing">
            <br>
            <input type="text" value="" name="" class="incoming">
            <input type="text" value="" name="" class="outgoing">
            <br>
            <input type="text" value="" name="" class="incoming">
            <input type="text" value="" name="" class="outgoing">
            <br>
            <input type="text" value="" name="" class="subIncoming" disabled>
            <input type="text" value="" name="" class="subOutgoing" disabled>   
        </fieldset>
        <fieldset class="total">
            <legend>Total</legend>
            <label>Incoming</label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label>Outgoing</label>
            <br>
            <input type="text" value="" name="" id="totalIncoming" disabled>
            <input type="text" value="" name="" id="totalOutgoing" disabled>
        </fieldset>
        <fieldset>
            <legend>Profit</legend>
            <input type="text" value="" name="" id="profit" disabled>            
        </fieldset>
</form>

var $form = $('#locations'),
    $totalIncoming = $('#totalIncoming'),
    $totalOutgoing = $('#totalOutgoing'),
    $profit = $('#profit');

$form.on('input', '.level input', function () {
   var textBoxClass = $(this).attr('class'),
       $level = $(this).closest('.level'),
       $subTextBox = null,
       $totalTextBox = null,
       $textBoxes = null,
       $subTextBoxes = null,
       subSum = 0, 
       totalSum = 0;

    if(textBoxClass === 'incoming'){
        $textBoxes = $level.find('.incoming');
        $subTextBox = $level.find('.subIncoming');
        $totalTextBox = $('#totalIncoming');
        $subTextBoxes = $form.find('.subIncoming');
    }else{
        $textBoxes =$level.find('.outgoing');
        $subTextBox = $level.find('.subOutgoing');
        $totalTextBox = $('#totalOutgoing');
        $subTextBoxes = $form.find('.subOutgoing');
    }

    $textBoxes.each(function () {
        var value = Number($(this).val());
        if (!isNaN(value)) subSum += value;
    });

    $subTextBox.val(subSum);

    $subTextBoxes.each(function () {
        var value = Number($(this).val());
        if (!isNaN(value)) totalSum += value;
    });

    $totalTextBox.val(totalSum);

    $profit.val($totalIncoming.val() - $totalOutgoing.val())
 });

Thank you! This is exactly what I needed. I really appreciate you taking the time to help me out. As soon as I get this feature of the site out of the way I am going to grab some tutorial books and get learning. — g4shallow, Sep 26 '13 at 13:06

Adding looped variables in Jquery and storing in input field

1 Answers1