Sum input values and skip one of them jQuery

Question

I have form which is making sum of numbers but I want that middle input to be skipped by jQuery for summing. Please help with this I'm posting code here. It surely must be the input tag because it sends data to PHP. I spent so much time to figure this out, but I can't see the problem.

jQuery

    var total;
    $("input.amount").keyup(function() {
        total = 0;
        $(this).parents("table").find("input.amount").each(function() {
            total += parseInt($(this).val());
        }).end().find("span.total").html(total);
    });

HTML

  <form class="calc">
    Form 1
    <br />
    <table border="0">
        <tr>
            <td>
                Amount 1
            </td>
            <td>
                <input class="amount" type="text" />
            </td>
        </tr>
        <tr>
            <td>
                Amount 2
            </td>
            <td>
                <input class="amount" type="text" />
            </td>
        </tr>
        <tr>
            <td>
                Amount 3
            </td>
            <td>
                <input class="amount" type="text" />
            </td>
        </tr>
        <tr>
            <td>
                Total Amount
            </td>
            <td>
                <span class="total">0</span>
            </td>
        </tr>
    </table>
    </form>

Middle input? Unfortunately we cannot read your mind. Can you please provide us more specific details? — Austin Brunkhorst, May 18 '13 at 07:07
If I understood you correctly you want to skip `Amount 2` field to be added to the sum? If you mean that you can just change the input's class. You are matching elements by `input.amount` so if Amount 2 input doesn't have `amount` class it wont be catched by jQuery. — Paul Reed, May 18 '13 at 07:27

James Donnelly · Accepted Answer · 2013-05-18T07:41:09.223

2

Simply change the HTML markup to give the input you wish to ignore a new class or data-* attribute.

<input class="amount ignored" type="text" />

Then check for the class in your .each() loop:

if(!$(this).hasClass('ignored'))
    total += parseInt($(this).val());

If you go down the data-* route, you could use:

<input class="amount" type="text" data-ignored="true" />

And check making sure that the data attribute is set:

if(!$(this).data('ignored'))
    total += parseInt($(this).val());

edited May 18 '13 at 07:41

answered May 18 '13 at 07:35

James Donnelly

126,410
34
208
218

it was interesting but can you show me on jsfiddle here is link [link](http://jsfiddle.net/3DB6r/) – Lasha May 18 '13 at 08:18
@Lasha http://jsfiddle.net/3DB6r/4/ both of the "Amount 2" text boxes are ignored. – James Donnelly May 18 '13 at 08:27
i dont know why but on jsfiddle it is working but on html no... what to do now?? :(( – Lasha May 18 '13 at 08:32
Have you added the "ignored" class to the inputs you want ignored? – James Donnelly May 18 '13 at 08:33
yes i copied from fiddle to html... included jquery 127 file but with no luck :((( – Lasha May 18 '13 at 08:39
yes it does the thing... thank you very much James! and thank you all for your replyes :D – Lasha May 18 '13 at 09:30
1

You'd need to run that loop on `$(document).ready()`. Move the loop into its own function and call that function on ready and on keyup. – James Donnelly May 18 '13 at 09:57
1

and if someones help it this is jsfiddle what we did here today [http://jsfiddle.net/fXWEU/](http://jsfiddle.net/fXWEU/) – Lasha May 18 '13 at 11:10

Sum input values and skip one of them jQuery

1 Answers1