Use another attribute instead of the input value to update total

Question

basically the below code creates a order total in the id="total" span depending on which checkbox/radio buttons are selected. The total is changed by the value of the checkbox/radio buttons however i was wondering if there's any other way to change the total without using the inputs value because its needed in the next part of the form. Maybe another input attribute? I'm just not sure how to go about it.

All help will be greatly appreciated, thank you!

<form action="cart.php" method="post" name="builder">
<input checked="checked" type="radio" name="term" value="12" onclick='check_value(this, 1)' />
<input type="radio" name="term" value="24" onclick='check_value(this, 2)' />
<input type="radio" name="term" value="36" onclick='check_value(this, 3)' />

<input type="checkbox" name="cid[]"  value="2" onclick='check_value(this, "")' />
<input type="checkbox" name="cid[]"  value="3" onclick='check_value(this, "")' />
<input type="checkbox" name="cid[]"  value="4" onclick='check_value(this, "")' />

Total Order: $<span id="total">36</span>
</form>

function check_value(curElem, id) {
            // calculate Total
            var total = 0;
            var controls = document.getElementsByTagName('input');
            for (var i = 0; i < controls.length; i++) {
                if ((controls[i].type === 'radio' || controls[i].type === 'checkbox') && controls[i].checked) {
                    total = total + parseFloat(controls[i].value);
                }
            }
            document.getElementById("total").innerHTML = total;
            //alert("Total: " + total);
        }

You can always use data- attribute to attach custom data to elements. developer.mozilla.org/en-US/docs/Web/Guide/HTML/… — Kristian Vitozev
– Kristian Vitozev, Commented Jul 27, 2015 at 5:37

manoj · Accepted Answer · 2015-07-27 05:42:13Z

1

if you really want to use another attribute, use it

use an attribute of your choice, say nval and access it as controls[i].getAttribute("nval")

otherwise,

you can create plenty of hidden input fields in the page, for each checkbox to hold your value. and use these hidden fields to compute total.

answered Jul 27, 2015 at 5:42

manoj

3,8212 gold badges24 silver badges30 bronze badges

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

4 Comments

user3094755 Over a year ago

I tried you function in chrome 43, and it just worked, but you can getAttribute of 'value' rather than use non-standard attribute. i.e., controls[i].getAttribute('value').

manoj Over a year ago

He wanted to avoid using value, for reason that I don't know yet. So I suggested this answer

Xirlas Over a year ago

I actually need some more attributes to use like the nval and data attributes suggested. What else can i use? Can i make them up?

manoj Over a year ago

Yes you can, you can make your own values, as long as your browser supports it.

Collectives™ on Stack Overflow

Use another attribute instead of the input value to update total

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related