Checking sum of values for a variable number of html text inputs

Question

I'm building a shopping cart and for each product there are at least 2 colors and five different sizes. When someone orders this product he has to fill in the following form:

<table cellspacing="0">
            <thead>
                <tr>
                    <th class="tcl" scope="col">COLOUR/SIZE</th>
                    <th class="tc2" scope="col">34</th>
                    <th class="tc3" scope="col">36</th>
                    <th class="tcr" scope="col">38</th>
                    <th class="tcr4" scope="col">40</th>
                    <th class="tcr4" scope="col">42</th>

                    <th class="tcr4" scope="col">44</th>
                    <th class="tcr4" scope="col">48</th>
                </tr>
            </thead>
            <tbody>
            <tr class="tcl">
                <td class="tcl">
                <div class="intd">

                    <div class="tclcon">
                    <img src="http://mlhpro.29media.eu/uploads/produse/mlh-gloria-gown-black-mlh-2e299d-pm.jpg" width="20" height="20" border="0" /><br />
                    black</div>
                </div>
                </td>
                <td class="tc2"><input type="text" name="qty_black_34" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
                <td class="tc3"><input type="text" name="qty_black_36" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
                <td class="tcr"><input type="text" name="qty_black_38" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>

                <td class="tcr4"><input type="text" name="qty_black_40" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
                <td class="tcr4"><input type="text" name="qty_black_42" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
                <td class="tcr4"><input type="text" name="qty_black_44" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
                <td class="tcr4"><input type="text" name="qty_black_48" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
            </tr>
            <tr class="tcl">
                <td class="tcl">
                <div class="intd">
                    <div class="tclcon">

                    <img src="http://mlhpro.29media.eu/uploads/produse/mlh-gloria-gown-powder-mlh-e6847a-pm.jpg" width="20" height="20" border="0" /><br />
                    powder</div>
                </div>
                </td>
                <td class="tc2"><input type="text" name="qty_powder_34" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
                <td class="tc3"><input type="text" name="qty_powder_36" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
                <td class="tcr"><input type="text" name="qty_powder_38" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
                <td class="tcr4"><input type="text" name="qty_powder_40" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>

                <td class="tcr4"><input type="text" name="qty_powder_42" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
                <td class="tcr4"><input type="text" name="qty_powder_44" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
                <td class="tcr4"><input type="text" name="qty_powder_48" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
            </tr>
            <tr class="tcl">
                <td class="tcl">
                <div class="intd">
                    <div class="tclcon">
                    <img src="http://mlhpro.29media.eu/uploads/produse/mlh-gloria-gown-red-mlh-959b5f-pm.jpg" width="20" height="20" border="0" /><br />

                    red</div>
                </div>
                </td>
                <td class="tc2"><input type="text" name="qty_red_34" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
                <td class="tc3"><input type="text" name="qty_red_36" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
                <td class="tcr"><input type="text" name="qty_red_38" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
                <td class="tcr4"><input type="text" name="qty_red_40" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
                <td class="tcr4"><input type="text" name="qty_red_42" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>

                <td class="tcr4"><input type="text" name="qty_red_44" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
                <td class="tcr4"><input type="text" name="qty_red_48" value="" size="1" border="noborder" style="background-color:#F2ECDB; text-align:right;" /></td>
            </tr>
                        </tbody>
</table>

So my input fields are named following this convention: "qty_" + "color name" + "size".

Which is the easiest way to check if the sum of values of the inputs is at least 3?

Possible duplicate of: stackoverflow.com/questions/2417553/… — Eran Zimmerman Gonen
– Eran Zimmerman Gonen, Commented Sep 14, 2011 at 7:37
It's not a duplicate. Input names are not the same for each product. — Psyche
– Psyche, Commented Sep 14, 2011 at 7:45
It's a duplicate. You can all add them the same class (like in the duplicate) or use a selector of jQuery — RvdK
– RvdK, Commented Sep 14, 2011 at 7:48

RSG · Accepted Answer · 2011-09-14 08:05:49Z

2

It looks like you can just sum all the inputs in the table. Should be:

var total = 0;
$.each($("input"),function(i, obj){
  total += parseInt($(obj).val()) || 0;
});
if(total > 2){
  return true;
}
return false;

If you've got other pesky fields you can either restrict the set by using .find off the table element, or use a more specific input selector that checks the name:

$("input[name^='qty_']")

EDIT Had to fix two things. I had obj, i in the rails each order, you want i, obj.

Also, have to handle empty inputs with || 0

See the working JSfiddle here

edited Sep 14, 2011 at 8:05

answered Sep 14, 2011 at 7:53

RSG

7,1436 gold badges39 silver badges51 bronze badges

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

1 Comment

Psyche Over a year ago

Thanks RSG. Looks very nice. I will try it out.

Alon Eitan · Accepted Answer · 2011-09-14 08:02:20Z

0

This will display the sum of all inpust on each row

$( "table tbody tr" ).each( function() {
    var sum = 0;
    $(this).find( "td:gt(0) input[type=text]" ).each( function() {
        sum += $(this).val() * 1;
    });
    alert(sum)
});

answered Sep 14, 2011 at 8:02

Alon Eitan

12k8 gold badges51 silver badges61 bronze badges

Collectives™ on Stack Overflow

Checking sum of values for a variable number of html text inputs

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related