We Keep Coding

jQuery/Javascript complex iterate over elements

We have a form and need to iterate over some elements to get the final sum to put in a "total" element.
E.g., here is a working starter script. It doesn't NOT iterate over the other ones. It does NOT consider the elements "item*", below, yet but should. Keep reading.
<script>
$( document ).ready(function() {
$('#taxsptotal').keyup(calcgrand);
$('#shiptotal').keyup(calcgrand);
$('#disctotal').keyup(calcgrand);
function calcgrand() {
var grandtot = parseFloat($('#subtotal').val(), 10)
+ parseFloat($("#taxsptotal").val(), 10)
+ parseFloat($("#shiptotal").val(), 10)
- parseFloat($("#disctotal").val(), 10)
$('#ordertotal').val(grandtot);
}
});
</script>
We are adding more to this. Think of having many items in a cart and each one has the same elements for the following where "i" is a number designating an individual item.
<!-- ordertotal = sum of #subtotal, #taxptotal, #shiptotal and #disctotal -->
<input type="text" id="ordertotal" name="ordertotal" value="106.49">
<input type="text" id="taxsptotal" name="taxsptotal" value="6.72">
<input type="text" id="shiptotal" name="shiptotal" value="15.83">
<input type="text" id="disctotal" name="disctotal" value="0.00">
<!-- sum of the cart "itemtotal[i]" -->
<input type="text" id="subtotal" name="subtotal" value="83.94">
<!-- cart items
User can change any itemprice[i] and/or itemquantity[i]
itemtotal[i] = sum(itemquantity[i] * itemprice[i])
-->
<input type="text" name="itemtotal[1]" value="8.97" />
<input type="text" name="itemquantity[1]" value="3" />
<input type="text" name="itemprice[1]" value="2.99" />
<input type="text" name="itemtotal[2]" value="4.59" />
<input type="text" name="itemquantity[2]" value="1" />
<input type="text" name="itemprice[2]" value="4.59" />
<input type="text" name="itemtotal[3]" value="0.99" />
<input type="text" name="itemquantity[3]" value="10" />
<input type="text" name="itemprice[3]" value="9.90" />
(1) User can change any itemprice[i] and/or itemquantity[i], so each needs a keyup. I can do that in php as it iterates over the items.
(2) These elements will have a $('.itemtotal[i]').keyup(calcgrand); (Or function other than calcgrand, if needed) statement, too. That keyup can be added by the php code as it evaluates the items in the cart.
(3) When an element is changed, then the script should automatically (a) calculate the $('[name="itemtotal[i]"]').val() and (b) replace the value for $('[name="itemtotal[i]"]').val().
(4) Then, the script above will use the $('[name="itemtotal[i]"]').val() to (a) replace the #subtotal value and (b) use that value in the equation.
Can someone help me with this? I am stuck on how to iterate over the [i] elements.
p.s. Any corrections/enhancements to the above code is appreciated, too.

Add a custom class to the desired inputs to sum:
HTML:
<input type="text" class="customclass" name=itemtotal[1] value="8.97" />
<input type="text" class="customclass" name=itemquantity[1] value="3" />
<input type="text" class="customclass" name=itemprice[1] value="2.99" />
JS:
var sum = 0;
$.each('.customclass',function(i, item){
sum = sum + Number($(this).val());
})
alert(sum);

if you for example group your inputs by giving them a class, or have each group in a div like so:
<!-- ordertotal = sum of #subtotal, #taxptotal, #shiptotal and #disctotal -->
<input type="text" id="ordertotal" name="ordertotal" value="106.49">
<input type="text" id="taxsptotal" name="taxsptotal" value="6.72">
<input type="text" id="shiptotal" name="shiptotal" value="15.83">
<input type="text" id="disctotal" name="disctotal" value="0.00">
<!-- sum of the cart "itemtotal[i]" -->
<input type="text" id="subtotal" name="subtotal" value="83.94">
<!-- cart items
User can change any itemprice[i] and/or itemquantity[i]
itemtotal[i] = sum(itemquantity[i] * itemprice[i])
-->
<div class="group">
<input type="text" name="itemtotal[1]" value="8.97" />
<input type="text" name="itemquantity[1]" value="3" />
<input type="text" name="itemprice[1]" value="2.99" />
</div>
<div class="group">
<input type="text" name="itemtotal[2]" value="4.59" />
<input type="text" name="itemquantity[2]" value="1" />
<input type="text" name="itemprice[2]" value="4.59" />
</div>
<div class="group">
<input type="text" name="itemtotal[3]" value="0.99" />
<input type="text" name="itemquantity[3]" value="10" />
<input type="text" name="itemprice[3]" value="9.90" />
</div>
Then you could do the following in javascript:
function calcSubTotal() {
$('[name^="itemtotal"]').each(function(i){
var sum = 0;
$('[name^="itemtotal"]').each(function(i){
sum += $(this).val();
});
$('#subtotal').val(sum);
});
}
$('.group').each(function(i) {
var total = $(this).find('[name^="itemtotal"]');
var qnt = $(this).find('[name^="itemquantity"]');
var price = $(this).find('[name^="itemprice"]');
total.keyup(function(e){
price.val(total.val() * qnt.val());
calcSubTotal();
});
qnt.keyup(function(e){
price.val(total.val() * qnt.val());
calcSubTotal();
});
});

$("[name^='itemprice'], [name^='itemquantity']").keyup(function(){
var input_name = $(this).attr('name');
var temp_name_split = input_name.split(/[\[\]]+/);
var temp_total = parseInt($('[name="itemquantity['+temp_name_split[1] +']"]').val()) * parseFloat($('[name="itemprice['+temp_name_split[1] +']"]').val());
$('[name="itemtotal['+temp_name_split[1]+']"]').val(temp_total.toFixed(2));
var total = 0;
$("[name^='itemtotal']").each(function() {
total += parseFloat($(this).val());
});
$('#subtotal').val(total.toFixed(2));
});

Javascript Price Calculator Issues (Checkboxes)

I am having a bit of trouble making the checkboxes display their values when checked and removing their value when unchecked. Before this I added a drop-down menu and radio buttons with values for a quote form. I have now added this checkbox group with values, however when the total amount is added at the end in the "totalPrice" DIV, it doesnt add in the checked boxes for the Equipment. Below is the Javascript and HTML code:
<script>
//ARRAY
var eventEquipmentArray = new Array();
eventEquipmentArray["15 Inch Speakers"]=5;
eventEquipmentArray["18 Inch Subwoofer"]=10;
eventEquipmentArray["LED Par Cans"]=5;
eventEquipmentArray["Smoke Machine"]=5;
eventEquipmentArray["Moving Head"]=10;
eventEquipmentArray["4 Gun Laser System"]=5;
eventEquipmentArray["Red Gun Laser System"]=5;
eventEquipmentArray["1500W Strobes"]=10;
eventEquipmentArray["Mirror LED Lighting"]=5;
//CHECKBOX - EVENT EQUIPMENT
function getEventEquipment()
{
var EventEquipment = 0;
var theForm = document.forms["quote"];
var selectedEquipment = theForm.elements["selectedEquipment"];
for(var i = 0; i < selectedEquipment.length; i++)
{
EventEquipment = EventEquipment + eventEquipmentArray[selectedEquipment[i].value];
break;
}
return EventEquipment;
}
//DIV - TOTAL PRICE TEST
function getTotals()
{
var totalPrice = getEventDuration() + getEventSuburb() + getEventEquipment();
var totalPriceDIV = document.getElementById("totalPrice");
totalPriceDIV.innerHTML = "Total: $"+totalPrice;
}
</script>
<form id="quote" action="" onsubmit="return false;">
<p>
<label>
<input type="checkbox" name="selectedEquipment" value="15 Inch Speakers" id="selectedEquipment_0" onChange="getTotals()" />
15" Speakers</label>
<br />
<label>
<input type="checkbox" name="selectedEquipment" value="18 Inch Subwoofer" id="selectedEquipment_1" onChange="getTotals()" />
18" Subwoofer</label>
<br />
<label>
<input type="checkbox" name="selectedEquipment" value="LED Par Cans" id="selectedEquipment_2" onChange="getTotals()" />
LED Par Cans</label>
<br />
<label>
<input type="checkbox" name="selectedEquipment" value="Smoke Machine" id="selectedEquipment_3" onChange="getTotals()" />
Smoke Machine</label>
<br />
<label>
<input type="checkbox" name="selectedEquipment" value="250W Moving Head" id="selectedEquipment_4" onChange="getTotals()" />
250W Moving Head</label>
<br />
<label>
<input type="checkbox" name="selectedEquipment" value="Mirror LED Lighting" id="selectedEquipment_5" onChange="getTotals()" />
Mirror LED Lights</label>
<br />
<label>
<input type="checkbox" name="selectedEquipment" value="4 Gun Laser System" id="selectedEquipment_6" onChange="getTotals()" />
4 Gun Laser Light</label>
<br />
<label>
<input type="checkbox" name="selectedEquipment" value="Red Gun Laser System" id="selectedEquipment_7" onChange="getTotals()" />
Red Laser Star Light</label>
<br />
<label>
<input type="checkbox" name="selectedEquipment" value="1500W Strobes" id="selectedEquipment_8" onChange="getTotals()" />
1500W Strobes</label>
<br />
</p>
<br />
<div id="totalPrice" style="color: red; text-align: center; font-size: 18px;"></div>
</form>
I have all the information of the Javascript and HTML placed in a JSFiddle below:
https://jsfiddle.net/dqx5yLz7/

First, remove break inside for. This will only return 1st value.
Second, you can use element.checked to check if its checked and add its value.
Third, you are accessing document.forms["quote"];, but there is no form with id quote
Also getEventDuration(), getEventSuburb() these functions are missing in your fiddle. I'm assuming that they were not relevant for current scenario and have commented them.
You can try something like this:
JSFiddle.
//ARRAY
var eventEquipmentArray = new Array();
eventEquipmentArray["15 Inch Speakers"] = 5;
eventEquipmentArray["18 Inch Subwoofer"] = 10;
eventEquipmentArray["LED Par Cans"] = 5;
eventEquipmentArray["Smoke Machine"] = 5;
eventEquipmentArray["Moving Head"] = 10;
eventEquipmentArray["4 Gun Laser System"] = 5;
eventEquipmentArray["Red Gun Laser System"] = 5;
eventEquipmentArray["1500W Strobes"] = 10;
eventEquipmentArray["Mirror LED Lighting"] = 5;
//CHECKBOX - EVENT EQUIPMENT
function getEventEquipment() {
var EventEquipment = 0;
var theForm = document.forms["quote"];
var selectedEquipment = theForm.elements["selectedEquipment"];
for (var i = 0; i < selectedEquipment.length; i++) {
if(selectedEquipment[i].checked){
EventEquipment += eventEquipmentArray[selectedEquipment[i].value] || 0;
}
}
return EventEquipment;
}
//DIV - TOTAL PRICE TEST
function getTotals() {
//var totalPrice = getEventDuration() + getEventSuburb() + getEventEquipment();
var totalPrice = getEventEquipment();
var totalPriceDIV = document.getElementById("totalPrice");
totalPriceDIV.innerText = "Total: $ " + totalPrice;
}
<form id="quote">
<p>
<label>
<input type="checkbox" name="selectedEquipment" value="15 Inch Speakers" id="selectedEquipment_0" onChange="getTotals()" /> 15" Speakers</label>
<br />
<label>
<input type="checkbox" name="selectedEquipment" value="18 Inch Subwoofer" id="selectedEquipment_1" onChange="getTotals()" /> 18" Subwoofer</label>
<br />
<label>
<input type="checkbox" name="selectedEquipment" value="LED Par Cans" id="selectedEquipment_2" onChange="getTotals()" /> LED Par Cans</label>
<br />
<label>
<input type="checkbox" name="selectedEquipment" value="Smoke Machine" id="selectedEquipment_3" onChange="getTotals()" /> Smoke Machine</label>
<br />
<label>
<input type="checkbox" name="selectedEquipment" value="250W Moving Head" id="selectedEquipment_4" onChange="getTotals()" /> 250W Moving Head</label>
<br />
<label>
<input type="checkbox" name="selectedEquipment" value="Mirror LED Lighting" id="selectedEquipment_5" onChange="getTotals()" /> Mirror LED Lights</label>
<br />
<label>
<input type="checkbox" name="selectedEquipment" value="4 Gun Laser System" id="selectedEquipment_6" onChange="getTotals()" /> 4 Gun Laser Light</label>
<br />
<label>
<input type="checkbox" name="selectedEquipment" value="Red Gun Laser System" id="selectedEquipment_7" onChange="getTotals()" /> Red Laser Star Light</label>
<br />
<label>
<input type="checkbox" name="selectedEquipment" value="1500W Strobes" id="selectedEquipment_8" onChange="getTotals()" /> 1500W Strobes</label>
<br />
</p>
<div id="totalPrice" style="color: red; text-align: center; font-size: 18px;"></div>
</form>

i have jQuery solution for your problem i hope it helps.
$(".checkbox").click(function(){
var favorite = [];
$.each($('input[type="checkbox"]:checked'), function() {
favorite.push($(this).val());
console.log(favorite);
});
var total = 0;
for (var i = 0; i < favorite.length; i++) {
total += favorite[i] << 0;
}
$('#total').html(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
<label class="col-md-2 control-label" for="submit">18 Inch Subwoofer</label>
<div class="col-md-4">
<input id="checkbox" name="Subwoofer" realname="18 Inch Subwoofer" type="checkbox" value="10"/>
</div>
</div>
<div class="checkbox">
<label for="submit">LED Par Cans</label>
<div>
<input id="checkbox" name="LED" type="checkbox" realname="LED Par Cans" value="5"/>
</div>
</div>
<div class="checkbox">
<label for="submit">Smoke Machine</label>
<div >
<input id="checkbox" name="Smoke Machine" realname="Smoke Machine"type="checkbox" value="5"/>
</div>
</div>
<div>
<label for="name">Totalprice: </label>
<p id="total"></p>
</div>

In the function getEventEquipment() inside the for loop you need to add the condition to check whether the check box is selected or not and remove the break statement. The altered code is below :
function getEventEquipment()
{
var EventEquipment = 0;
var theForm = document.forms["quote"];
var selectedEquipment = theForm.elements["selectedEquipment"];
for(var i = 0; i < selectedEquipment.length; i++)
{
if (selectedEquipment[i].checked) {
EventEquipment = parseInt(EventEquipment, 10) + parseInt(eventEquipmentArray[selectedEquipment[i].value], 10);
}
}
return EventEquipment;
}
Also make sure the form's id has been set to quote.
If you get NaN in the count please check your array and the value details in the form.

How to show the results when checkbox is selected

Here is my code:
<form id="F2" onsubmit="return false;">
Which do you want?<br />
<input name="a" onclick="TotalCheckedValues()" type="checkbox" value="10" />New (10.00)<br />
<input name="b" onclick="TotalCheckedValues()" type="checkbox" value="0" />Broken (Free)<br />
<input name="c" onclick="TotalCheckedValues()" type="checkbox" value="55" />Antique (55.00)<br />
<input name="d" onclick="TotalCheckedValues()" type="checkbox" value="4.95" />Refurbished (4.95)<br />
Total: <input name="T" readonly="readonly" size="5" type="text" /><br />
<input onclick="TotalCheckedValues()" type="button" value="Click" /> </form>
function TotalCheckedValues() {
var total = 0;
if(document.getElementById("F2").a.checked == true) { total += parseFloat(document.getElementById("F2").a.value); }
if(document.getElementById("F2").b.checked == true) { total += parseFloat(document.getElementById("F2").b.value); }
if(document.getElementById("F2").c.checked == true) { total += parseFloat(document.getElementById("F2").c.value); }
if(document.getElementById("F2").d.checked == true) { total += parseFloat(document.getElementById("F2").d.value); }
var ts = new String(total);
if(ts.indexOf('.') < 0) { ts += '.00'; }
if(ts.indexOf('.') == (ts.length - 2)) { ts += '0'; }
document.getElementById("F2").T.value = ts;
document.getElementById("F3").innerHTML = ts;
}
I want to show the updated result whenever I click and untick the checkbox.

Just add "script" tag in your html before function start which indicate javascripts code.

Repeating Element in Javascript Code

I have created a .hta form that connects to an excel file. The data entered is pasted in the spreadsheet. I have two problems with this code and I can't seem to figure out what I am doing wrong.
<html>
<head>
<script>
function test() {
var excel = new ActiveXObject("Excel.Application");
excel.visible = true;
var wb = excel.Workbooks.Open("C:\\Users\\Dane\\Desktop\\1.xlsx");
var optionValue;
var s = Form1.select1;
var data = [];
var sCell = wb.sheets("sheet1").cells(1,1).currentregion.offset(1);
data.push(Form1.text1.value);
data.push(Form1.text2.value);
data.push(Form1.text3.value);
data.push(Form1.text4.value);
data.push(s.options[s.selectedIndex].text);
data.push(Form1.text5.value);
data.push(Form1.text6.value);
data.push(Form1.text7.value);
for(var i=0;i<Form1.option1.length;i++) {
if(Form1.option1[i].checked){
data.push(Form1.option1[i].value);
break;
}
}
for(var i=0; i<data.length;i++) {
sCell.offset(0,i) = data[i];
}
for(var i=0;i<Form1.option2.length;i++) {
if(Form1.option2[i].checked){
data.push(Form1.option2[i].value);
break;
}
}
for(var i=0; i<data.length;i++) {
sCell.offset(0,i) = data[i];
}
wb.close(true);
}
</script>
</head>
<body>
<form name="Form1">
<p>
Entry 1: <input name="text1" type="text" size="10" /><br />
Entry 2: <input name="text2" type="text" size="10" /><br />
Entry 3: <input name="text3" type="text" size="10" /><br />
Entry 4: <input name="text4" type="text" size="10" /><br />
Selection 1: <select name="select1">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
<option value="6">F</option>
</select> <br />
Entry 5: <input name="text5" type="text" size="10" /><br />
Entry 6: <input name="text6" type="text" size="10" /><br />
Entry 7: <input name="text7" type="text" size="10" /><br />
Question 1<br />
Yes : <input type="radio" name="option1" value="Yes"><br />
No : <input type="radio" name="option1" value="No"><br />
N/A : <input type="radio" name="option1" value="N/A"><br />
Question 2<br />
Yes : <input type="radio" name="option2" value="Yes"><br />
No : <input type="radio" name="option2" value="No"><br />
N/A : <input type="radio" name="option2" value="N/A"><br />
<input type="button" value="Save to Excel" onclick="test()" />
</form>
</body>
Problems:
The last radio button value is repeated a few times at the end of the spreadsheet.
When the user uses the program a second time, the previous data is overwritten.
Sample to download (make sure to change the file path):
http://www.filedropper.com/new_3

I believe the second problem is caused because this is in your code twice:
for(var i=0; i<data.length;i++) {
sCell.offset(0,i) = data[i];
}
Once you have your array of data, you shouldn't have to cycle through it twice.
For the first problem, I believe it's created by this line:
var sCell = wb.sheets("sheet1").cells(1,1).currentregion.offset(1);
You are saying in essence "select this region here" not "start at this region." Unfortunately, I don't know the code for what you need, but that's my interpretation.

Radio Button Javascript

I have radiobuttons like below:
Apple
<input type="radio" id="one" name="apple" data-price="10" value="light"/> Light
<input type="radio" id="two" name="apple" data-price="20" value="dark" /> Dark
<input type="text" id="appleqty" name="appleqty" value="" />
Mango
<input type="radio" id="three" name="Mango" data-price="30" value="light"/> Light
<input type="radio" id="one" name="Mango" data-price="40" value="dark" /> Dark
<input type="text" id="Mangoqty" name="Mangoqty" value="" />
Pine Apple
<input type="radio" id="four" name="Pineapple" data-price="50" value="light"/> Light
<input type="radio" id="five" name="Pineapple" data-price="60" value="dark" /> Dark
<input type="text" id="Pineappleqty" name="Pineappleqty" value="" />
Grape
<input type="radio" id="six" name="Grape" data-price="70" value="light"/> Light
<input type="radio" id="seven" name="Grape" data-price="80" value="dark" /> Dark
<input type="text" id="Pineappleqty" name="Pineappleqty" value="" />
​
The radiobuttons are separated in a Group as (Apple,Mango,Pineapple,Grape).
I need to add the Price with the Quantity he needs.
Example:
If a user clicked Dark Apple in the radiobutton with 1 Qty the Price should be 20 and if the user changed the clicked Radio to the Light Apple radiobutton then the price should be 10 - 20(Previous Price If Checked) = 10 .
Is this possible using JavaScript?
My code that I have tried:
function upprice(ref)
{
var elname = ref.getAttribute("name");
var qtyname = elname+"qty";
var price = ref.getAttribute("proprice");
var qty = parseInt(document.getElementById(qtyname).value)
var newprice = parseInt(price*qty);
var olprice = parseInt(document.getElementById("orderpagepriceinstant").innerHTML);
var totalprice = parseInt(olprice+newprice);
document.getElementById("orderpagepriceinstant").innerHTML = parseInt(totalprice)
}

Your inputs should be something like:
<input type="radio" name="apple" value="10">Light
<input type="radio" name="apple" value="20">Dark
<input type="text" name="appleqty" value="">
You can put a click listener on the radio buttons and a change listener on the quantity to update the price:
<input type="radio" onclick="updatePrice(this)" ...>
<input type="text" onclick="updatePrice(this)" ...>
and the update function is:
function updatePrice(el) {
var priceEach, quantity, itemValue;
if (el.type == 'radio') {
priceEach = getRBValue(el);
quantity = el.form[el.name + 'qty'].value;
} else if (el.type == 'text') {
quantity = el.value;
priceEach = getRBValue(el.form[el.name.replace(/qty$/,'')]);
}
/*
code here to validate the value of quantity
*/
itemValue = quantity * priceEach;
/*
do something with itemValue
*/
alert(itemValue);
}
// Get the value of a radio button set
function getRBValue(el) {
var buttons;
// See if have been passed a button or button set (NodeList)
if (el.type == 'radio') {
buttons = el.form[el.name];
} else if (typeof el.length == 'number') {
buttons = el;
}
if (buttons) {
for (var i=0, iLen=buttons.length; i<iLen; i++) {
if (buttons[i].checked) {
return buttons[i].value;
}
}
}
}
</script>
The markup, you can also add a click listener to the form to do updates rather than on each radio button. You should also have a reset button so the user can clear the form.
<form ... >
<input type="radio" name="apple" value="10" onclick="updatePrice(this)">Light
<input type="radio" name="apple" value="20" onclick="updatePrice(this)">Dark
<input type="text" name="appleqty" value="" onchange="updatePrice(this)">
<br>
<input type="reset">
</form>

Here's a quick jQuery example: http://jsfiddle.net/FTscC/
(laptop dying, I'll elaborate when I can tomorrow!)