I have some checkboxes that when checked will updated the price total at the bottom and they work great. However, I also added a separate input field for entering a quantity. I am trying to get that quantity to multiply by the value of the input field. Right now I only have the code adding the text input field to the total instead of multiplying it by the field it is next to.
Here is my code:
function updateTotal() {
var HI1 = document.getElementById('HI1');
var HI2 = document.getElementById('HI2');
var HI3 = document.getElementById('HI3');
var HI4 = document.getElementById('HI4');
var HI5 = document.getElementById('HI5');
var HI6 = document.getElementById('HI6');
var HI7 = document.getElementById('HI7');
var HI8 = document.getElementById('HI8');
var HI9 = document.getElementById('HI9');
var HI9 = document.getElementById('HI9');
var inputs = document.getElementsByName('Q');
var amount = 0;
for (var i = 0; i < inputs.length; i++) {
var ip = inputs[i];
if (ip.name && ip.name.indexOf("total") < 0) {
amount += parseInt(ip.value) || 0;
}
}
amount += HI1.checked ? parseFloat(HI1.getAttribute('data-price')) : 0;
amount += HI2.checked ? parseFloat(HI2.getAttribute('data-price')) : 0;
amount += HI3.checked ? parseFloat(HI3.getAttribute('data-price')) : 0;
amount += HI4.checked ? parseFloat(HI4.getAttribute('data-price')) : 0;
amount += HI5.checked ? parseFloat(HI5.getAttribute('data-price')) : 0;
amount += HI6.checked ? parseFloat(HI6.getAttribute('data-price')) : 0;
amount += HI7.checked ? parseFloat(HI7.getAttribute('data-price')) : 0;
amount += HI8.checked ? parseFloat(HI8.getAttribute('data-price')) : 0;
amount += HI9.checked ? parseFloat(HI9.getAttribute('data-price')) : 0;
document.getElementById('price').value = "$" + amount;
}
window.onload = updateTotal;<ul id="input_9_34" class="gfield_checkbox">
<li class="gchoice_9_34_1">
<input id="HI1" type="checkbox" tabindex="22" value="10'x10'|950" data-price="950" name="HI1" onChange="updateTotal();">
<label id="label_9_34_1" for="HT1" price=" +$950.00">
10'x10' inline
<span class="ginput_price"> +$950.00</span>
</label>
| Quantity:
<input type="text" name="Q" id="Q1" value="0" class="quantity" onChange="updateTotal();">
</li>
<li class="gchoice_9_34_2">
<input id="HI2" type="checkbox" tabindex="23" value="10'x10'|975" data-price="975" name="HI2" onChange="updateTotal();">
<label id="label_9_34_2" for="HT2" price=" +$975.00">
10'x10' - 1 corner (very limitied supply)
<span class="ginput_price"> +$975.00</span>
</label>
| Quantity:
<input type="text" name="Q" id="Q2" value="0" class="quantity" onChange="updateTotal();">
</li>
<li class="gchoice_9_34_3">
<input id="HI3" type="checkbox" tabindex="24" value="10'x10'|1000" data-price="1000" name="HI3" onChange="updateTotal();">
<label id="label_9_34_3" for="HT3" price=" +$1,000.00">
10'x10' - 2 corner (very limitied supply)
<span class="ginput_price"> +$1,000.00</span>
</label>
| Quantity:
<input type="text" name="Q" id="Q3" value="0" class="quantity">
</li>
<li class="gchoice_9_34_4">
<input id="HI4" type="checkbox" tabindex="25" value="10'x15'|1435" data-price="1435" name="HI4" onChange="updateTotal();">
<label id="label_9_34_4" for="HT4" price=" +$1,435.00">
10'x15' - 1 corner or inline
<span class="ginput_price"> +$1,435.00</span>
</label>
| Quantity:
<input type="text" name="Q4" id="Q4" value="0" class="quantity">
</li>
<li class="gchoice_9_34_5">
<input id="HI5" type="checkbox" tabindex="26" value="10'x20'|1900" data-price="1900" name="HI5" onChange="updateTotal();">
<label id="label_9_34_5" for="HT5" price=" +$1,900.00">
10'x20' - 1 corner or inline
<span class="ginput_price"> +$1,900.00</span>
</label>
| Quantity:
<input type="text" name="Q5" id="Q5" value="0" class="quantity">
</li>
<li class="gchoice_9_34_6">
<input id="HI6" type="checkbox" tabindex="27" value="10'x30'|2850" data-price="2850" name="HI6" onChange="updateTotal();">
<label id="label_9_34_6" for="HT6" price=" +$2,850.00">
10'x30' - 1 corner or inline
<span class="ginput_price"> +$2,850.00</span>
</label>
| Quantity:
<input type="text" name="Q6" id="Q6" value="0" class="quantity">
</li>
<li class="gchoice_9_34_7">
<input id="HI7" type="checkbox" tabindex="28" value="20'x20'|3800" data-price="3800" name="HI7" onChange="updateTotal();">
<label id="label_9_34_7" for="HT7" price=" +$3,800.00">
20'x20' - 2 corner endcap
<span class="ginput_price"> +$3,800.00</span>
</label>
| Quantity:
<input type="text" name="Q7" id="Q7" value="0" class="quantity">
</li>
<li class="gchoice_9_34_8">
<input id="HI8" type="checkbox" tabindex="29" value="20'x20'|4000" data-price="4000" name="HI8" onChange="updateTotal();">
<label id="label_9_34_8" for="HT8" price=" +$4,000.00">
20'x20' - 4 corner island
<span class="ginput_price"> +$4,000.00</span>
</label>
| Quantity:
<input type="text" name="Q8" id="Q8" value="0" class="quantity">
</li>
<li class="gchoice_9_34_9">
<input id="HI9" type="checkbox" tabindex="30" value="20'x30'|5650" data-price="5650" name="HI9" onChange="updateTotal();">
<label id="label_9_34_9" for="HT9" price=" +$5,650.00">
20'x30' - 2 corner encap
<span class="ginput_price"> +$5,650.00</span>
</label>
| Quantity:
<input type="text" name="Q9" id="Q9" value="0" class="quantity">
</li>
</ul>
Total Price:
<input name="price" id="price" type="text" readonly="readonly" class="total">Any thoughts on how to accomplish this?
Add a data-qty attribute to the checkboxes that contains the ID of the input field with the quantity. Then you can multiply the price by the quantity in the corresponding input.
function updateTotal() {
var checkboxes = document.querySelectorAll("input[type=checkbox]");
var inputs = document.getElementsByName('Q');
var amount = 0;
for (var i = 0; i < checkboxes.length; i++) {
var cb = checkboxes[i];
if (cb.checked) {
var input = document.getElementById(cb.getAttribute('data-qty'));
var qty = input.value;
if (qty != '') {
var price = cb.getAttribute('data-price');
amount += price * qty;
}
}
}
document.getElementById('price').value = "$" + amount;
}
window.onload = updateTotal;<ul id="input_9_34" class="gfield_checkbox">
<li class="gchoice_9_34_1">
<input id="HI1" type="checkbox" tabindex="22" value="10'x10'|950" data-price="950" data-qty="Q1" name="HI1" onChange="updateTotal();">
<label id="label_9_34_1" for="HT1" price=" +$950.00">
10'x10' inline
<span class="ginput_price"> +$950.00</span>
</label>
| Quantity:
<input type="text" name="Q" id="Q1" value="0" class="quantity" onChange="updateTotal();">
</li>
<li class="gchoice_9_34_2">
<input id="HI2" type="checkbox" tabindex="23" value="10'x10'|975" data-price="975" data-qty="Q2" name="HI2" onChange="updateTotal();">
<label id="label_9_34_2" for="HT2" price=" +$975.00">
10'x10' - 1 corner (very limitied supply)
<span class="ginput_price"> +$975.00</span>
</label>
| Quantity:
<input type="text" name="Q" id="Q2" value="0" class="quantity" onChange="updateTotal();">
</li>
<li class="gchoice_9_34_3">
<input id="HI3" type="checkbox" tabindex="24" value="10'x10'|1000" data-price="1000" data-qty="Q3" name="HI3" onChange="updateTotal();">
<label id="label_9_34_3" for="HT3" price=" +$1,000.00">
10'x10' - 2 corner (very limitied supply)
<span class="ginput_price"> +$1,000.00</span>
</label>
| Quantity:
<input type="text" name="Q" id="Q3" value="0" class="quantity">
</li>
<li class="gchoice_9_34_4">
<input id="HI4" type="checkbox" tabindex="25" value="10'x15'|1435" data-price="1435" data-qty="Q4" name="HI4" onChange="updateTotal();">
<label id="label_9_34_4" for="HT4" price=" +$1,435.00">
10'x15' - 1 corner or inline
<span class="ginput_price"> +$1,435.00</span>
</label>
| Quantity:
<input type="text" name="Q4" id="Q4" value="0" class="quantity">
</li>
<li class="gchoice_9_34_5">
<input id="HI5" type="checkbox" tabindex="26" value="10'x20'|1900" data-price="1900" data-qty="Q5" name="HI5" onChange="updateTotal();">
<label id="label_9_34_5" for="HT5" price=" +$1,900.00">
10'x20' - 1 corner or inline
<span class="ginput_price"> +$1,900.00</span>
</label>
| Quantity:
<input type="text" name="Q5" id="Q5" value="0" class="quantity">
</li>
<li class="gchoice_9_34_6">
<input id="HI6" type="checkbox" tabindex="27" value="10'x30'|2850" data-price="2850" data-qty="Q6" name="HI6" onChange="updateTotal();">
<label id="label_9_34_6" for="HT6" price=" +$2,850.00">
10'x30' - 1 corner or inline
<span class="ginput_price"> +$2,850.00</span>
</label>
| Quantity:
<input type="text" name="Q6" id="Q6" value="0" class="quantity">
</li>
<li class="gchoice_9_34_7">
<input id="HI7" type="checkbox" tabindex="28" value="20'x20'|3800" data-price="3800" data-qty="Q7" name="HI7" onChange="updateTotal();">
<label id="label_9_34_7" for="HT7" price=" +$3,800.00">
20'x20' - 2 corner endcap
<span class="ginput_price"> +$3,800.00</span>
</label>
| Quantity:
<input type="text" name="Q7" id="Q7" value="0" class="quantity">
</li>
<li class="gchoice_9_34_8">
<input id="HI8" type="checkbox" tabindex="29" value="20'x20'|4000" data-price="4000" data-qty="Q8" name="HI8" onChange="updateTotal();">
<label id="label_9_34_8" for="HT8" price=" +$4,000.00">
20'x20' - 4 corner island
<span class="ginput_price"> +$4,000.00</span>
</label>
| Quantity:
<input type="text" name="Q8" id="Q8" value="0" class="quantity">
</li>
<li class="gchoice_9_34_9">
<input id="HI9" type="checkbox" tabindex="30" value="20'x30'|5650" data-price="5650" name="HI9" onChange="updateTotal();">
<label id="label_9_34_9" for="HT9" data-qty="Q9" price=" +$5,650.00">
20'x30' - 2 corner encap
<span class="ginput_price"> +$5,650.00</span>
</label>
| Quantity:
<input type="text" name="Q9" id="Q9" value="0" class="quantity">
</li>
</ul>
Total Price:
<input name="price" id="price" type="text" readonly="readonly" class="total">