How to sum ticked RadioButtons - javascript

i would like to sum the ticked "Yes/No" RadioButtons from my checklist. So, it depens wheter i click on "Yes" or "No" if it should be count to sum.
This is my code so far. Unfortunately, the sum doesn't display.
function checkTicked() {
var form = document.getElementById("selected");
let sum = 0;
for (j = 0; j < form.length; j++) {
if (form[j].checked == true) {
sum = sum + 1;
}
}
document.getElementById("summe").value = sum;
}
<form name="liste"></form>
<table>
<tbody>
<tr>
<th>Question</th>
<th>Answer</th>
</tr>
<tr>
<td>Trifft A zu?</td>
<td>
<div>
<label>
<input type="radio" name="choice0" id="selected" onchange="checkTicked()">
Ja
</label>
<label>
<input type="radio" name="choice0" onchange="checkTicked()">
Nein
</label>
</div>
</td>
</tr>
<tr>
<td>Trifft B zu?</td>
<td>
<div>
<label>
<input type="radio" name="choice1" id="selected" onchange="checkTicked()">
Ja
</label>
<label>
<input type="radio" name="choice1" onchange="checkTicked()">
Nein
</label>
</div>
</td>
</tr>
<tr>
<td colspan="2" ; style="text-align:right;"><b>Summe</b></td>
<td><input type="text" size="3" name="summe1" id="summe" value="0"></td>
</tr>
</tbody>
</table>


You had some issues
closed the form too early
missed a <table>
not unique IDs
you had an int instead of let or var in the for loop
To fix YOUR code you can do
function checkTicked() {
var radios = document.querySelectorAll("input[type=radio]:checked");
let sum = 0;
for (let i = 0; i < radios.length; i++) {
if (radios[i].closest("label").innerText.trim() === "Ja") {
sum += 1;
}
}
document.getElementById("summe").value = sum;
}
But I suggest delegation and a simpler script with more information on the radio itself:
I delegate from the form instead of adding inline event handlers
You can remove the summeNEIN from the form and the second count if you only want the JA
document.getElementById("liste").addEventListener("input", function(e) {
document.getElementById("summeJA").value = this.querySelectorAll("input[value=ja]:checked").length
document.getElementById("summeNEIN").value = this.querySelectorAll("input[value=nein]:checked").length
})
<form id="liste">
<table>
<tbody>
<tr>
<th>Question</th>
<th>Answer</th>
</tr>
<tr>
<td>Trifft A zu?</td>
<td>
<div>
<label> <input type="radio" name="choice0" value="ja">Ja</label>
<label><input type="radio" name="choice0" value="nein">Nein</label>
</div>
</td>
</tr>
<tr>
<td>Trifft B zu?</td>
<td>
<div>
<label><input type="radio" name="choice1" value="ja">Ja</label>
<label><input type="radio" name="choice1" value="nein">Nein</label>
</div>
</td>
</tr>
<tr>
<td colspan="2" ; style="text-align:right;"><b>Summe JA</b></td>
<td><input type="text" size="3" name="summeJA" id="summeJA" value="0"></td>
</tr>
<tr>
<td colspan="2" ; style="text-align:right;"><b>Summe NEIN</b></td>
<td><input type="text" size="3" name="summeNEIN" id="summeNEIN" value="0"></td>
</tr>
</tbody>
</table>
</form>

Related

Radio button answer appears in <textarea> but then disappears quickly [duplicate]

This question already has answers here:
Disable form auto submit on button click
(6 answers)
Closed 1 year ago.
Project:
create 4 radio buttons
user clicks on an option and submits
answer should appear in a textarea box
Why is it when I click on a specific radio button option, and then the submit button, the value of the radio button appears in the textarea space for a split second and then disappears?
Thanks heaps!
document.getElementById("clickMePlease").onclick=function() {
var theOptionPicked;
var i;
var nameOption;
for (i = 0; i <= 3; i++) {
theOptionPicked = document.myForm.nameQuestion[i];
if (theOptionPicked.checked == true) {
nameOption = theOptionPicked.value;
}
}
document.myForm.txtOutput.value = "You have picked " + theOptionPicked.value;
}
<!DOCTYPE html>
<html>
<form name="myForm">
<table border=1>
<tr>
<td>
<input type="radio" name="nameQuestion" value="fred">fred
</td>
</tr>
<td>
<input type="radio" name="nameQuestion" value="rahul">Rahul
</td>
<tr>
<td>
<input type="radio" name="nameQuestion" value="peter">peter
</td>
</tr>
<tr>
<td>
<input type="radio" name="nameQuestion" value="none">none of the above
</td>
</tr>
<tr>
<td>
<input style="width: 100%" type="submit" value="clickme" id="clickMePlease">
</td>
</tr>
</table>
<textarea name="txtOutput" rows=5 cols=20>
</textarea>
</form>
<script>
</script>
</html>

Use onsubmit="event.preventDefault();" on your form element:
document.getElementById("clickMePlease").onclick=function() {
var theOptionPicked;
var i;
var nameOption;
for (i = 0; i <= 3; i++) {
theOptionPicked = document.myForm.nameQuestion[i];
if (theOptionPicked.checked == true) {
nameOption = theOptionPicked.value;
}
}
document.myForm.txtOutput.value = "You have picked " + theOptionPicked.value;
}
<!DOCTYPE html>
<html>
<form name="myForm" onsubmit="event.preventDefault();">
<table border=1>
<tr>
<td>
<input type="radio" name="nameQuestion" value="fred">fred
</td>
</tr>
<td>
<input type="radio" name="nameQuestion" value="rahul">Rahul
</td>
<tr>
<td>
<input type="radio" name="nameQuestion" value="peter">peter
</td>
</tr>
<tr>
<td>
<input type="radio" name="nameQuestion" value="none">none of the above
</td>
</tr>
<tr>
<td>
<input style="width: 100%" type="submit" value="clickme" id="clickMePlease">
</td>
</tr>
</table>
<textarea name="txtOutput" rows=5 cols=20>
</textarea>
</form>
<script>
</script>
</html>
Edit:
You was asking for prevent reloading website after submitting form, so I was not checking other functionalitty. Now I repaired and simplified your snippet, so it selects correctly:
document.getElementById("clickMePlease").onclick = function() {
var theOptionPicked = document.querySelector('input[name="nameQuestion"]:checked').value;
document.myForm.txtOutput.value = "You have picked " + theOptionPicked;
}
<!DOCTYPE html>
<html>
<form name="myForm" onsubmit="event.preventDefault();">
<table border=1>
<tr>
<td>
<input type="radio" name="nameQuestion" value="fred">fred
</td>
</tr>
<td>
<input type="radio" name="nameQuestion" value="rahul">Rahul
</td>
<tr>
<td>
<input type="radio" name="nameQuestion" value="peter">peter
</td>
</tr>
<tr>
<td>
<input type="radio" name="nameQuestion" value="none">none of the above
</td>
</tr>
<tr>
<td>
<input style="width: 100%" type="submit" value="clickme" id="clickMePlease">
</td>
</tr>
</table>
<textarea name="txtOutput" rows=5 cols=20>
</textarea>
</form>
<script>
</script>
</html>

How to Pass HTML Input values (batch) to Google Spreadsheet using only JavaScript?

I am using Google Scripts App, and I need to send the value of a batch of HTML Inputs to a Google Spreadsheet, on specific cells (row and column). However, the code I used, takes forever, and when it finish, not all inputs are passed to the Spreadsheet. Do to company restrictions (policies on software), I can only use pure JavaScript. This HTML page, is just a part of an App whit others pages, so using Google Forms, can’t be an option.
Is there a better way to send the inputs values to Google Spreadsheet faster and without skipping inputs?
I know that using too much “google.script.run”, slows down the process heavily, but can’t figure out another way. I am new at this, so don’t expect I know too much, just the barely basics.
Because of STACKOVERFLOW limitation, I limited the code to only three MODULES and 20 inputs per module (but there are four MODULES, with 30 inputs per module, as you can see it in the picture).
What alternative would you all recommend?
I am sharing the Code.gs and HTML scripts.
Thanks.
code.gs
function doGet() {
var template = HtmlService.createTemplateFromFile("HTML_start_page")
return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
return HtmlService.createHtmlOutputFromFile('HTML_start_page');
}
var ss = SpreadsheetApp.openByUrl("YOUR_GOOGLE_SPREADSHEET_URL_HERE");
var sheet_Balance = ss.getSheetByName("Page_1");
function getValuesFromForm_Balance_001A(id2000_01AA){
sheet_Balance.getRange(267,6).setValue(id2000_01AA);
}
function getValuesFromForm_Balance_002A(id2000_02AA){
sheet_Balance.getRange(268,6).setValue(id2000_02AA);
}
function getValuesFromForm_Balance_003A(id2000_03AA){
sheet_Balance.getRange(269,6).setValue(id2000_03AA);
}
function getValuesFromForm_Balance_004A(id2000_04AA){
sheet_Balance.getRange(270,6).setValue(id2000_04AA);
}
function getValuesFromForm_Balance_005A(id2000_05AA){
sheet_Balance.getRange(271,6).setValue(id2000_05AA);
}
function getValuesFromForm_Balance_006A(id1000_01AA){
sheet_Balance.getRange(272,6).setValue(id1000_01AA);
}
function getValuesFromForm_Balance_007A(id1000_02AA){
sheet_Balance.getRange(273,6).setValue(id1000_02AA);
}
function getValuesFromForm_Balance_008A(id1000_03AA){
sheet_Balance.getRange(274,6).setValue(id1000_03AA);
}
function getValuesFromForm_Balance_009A(id1000_04AA){
sheet_Balance.getRange(275,6).setValue(id1000_04AA);
}
function getValuesFromForm_Balance_010A(id1000_05AA){
sheet_Balance.getRange(276,6).setValue(id1000_05AA);
}
function getValuesFromForm_Balance_011A(id500_01AA){
sheet_Balance.getRange(277,6).setValue(id500_01AA);
}
function getValuesFromForm_Balance_012A(id500_02AA){
sheet_Balance.getRange(278,6).setValue(id500_02AA);
}
function getValuesFromForm_Balance_013A(id500_03AA){
sheet_Balance.getRange(279,6).setValue(id500_03AA);
}
function getValuesFromForm_Balance_014A(id500_04AA){
sheet_Balance.getRange(280,6).setValue(id500_04AA);
}
function getValuesFromForm_Balance_015A(id500_05AA){
sheet_Balance.getRange(281,6).setValue(id500_05AA);
}
function getValuesFromForm_Balance_016A(id200_01AA){
sheet_Balance.getRange(282,6).setValue(id200_01AA);
}
function getValuesFromForm_Balance_017A(id200_02AA){
sheet_Balance.getRange(283,6).setValue(id200_02AA);
}
function getValuesFromForm_Balance_018A(id200_03AA){
sheet_Balance.getRange(284,6).setValue(id200_03AA);
}
function getValuesFromForm_Balance_019A(id200_04AA){
sheet_Balance.getRange(285,6).setValue(id200_04AA);
}
function getValuesFromForm_Balance_020A(id200_05AA){
sheet_Balance.getRange(286,6).setValue(id200_05AA);
}
function getValuesFromForm_Balance_001B(id2000_01BB){
sheet_Balance.getRange(267,7).setValue(id2000_01BB);
}
function getValuesFromForm_Balance_002B(id2000_02BB){
sheet_Balance.getRange(268,7).setValue(id2000_02BB);
}
function getValuesFromForm_Balance_003B(id2000_03BB){
sheet_Balance.getRange(269,7).setValue(id2000_03BB);
}
function getValuesFromForm_Balance_004B(id2000_04BB){
sheet_Balance.getRange(270,7).setValue(id2000_04BB);
}
function getValuesFromForm_Balance_005B(id2000_05BB){
sheet_Balance.getRange(271,7).setValue(id2000_05BB);
}
function getValuesFromForm_Balance_006B(id1000_01BB){
sheet_Balance.getRange(272,7).setValue(id1000_01BB);
}
function getValuesFromForm_Balance_007B(id1000_02BB){
sheet_Balance.getRange(273,7).setValue(id1000_02BB);
}
function getValuesFromForm_Balance_008B(id1000_03BB){
sheet_Balance.getRange(274,7).setValue(id1000_03BB);
}
function getValuesFromForm_Balance_009B(id1000_04BB){
sheet_Balance.getRange(275,7).setValue(id1000_04BB);
}
function getValuesFromForm_Balance_010B(id1000_05BB){
sheet_Balance.getRange(276,7).setValue(id1000_05BB);
}
function getValuesFromForm_Balance_011B(id500_01BB){
sheet_Balance.getRange(277,7).setValue(id500_01BB);
}
function getValuesFromForm_Balance_012B(id500_02BB){
sheet_Balance.getRange(278,7).setValue(id500_02BB);
}
function getValuesFromForm_Balance_013B(id500_03BB){
sheet_Balance.getRange(279,7).setValue(id500_03BB);
}
function getValuesFromForm_Balance_014B(id500_04BB){
sheet_Balance.getRange(280,7).setValue(id500_04BB);
}
function getValuesFromForm_Balance_015B(id500_05BB){
sheet_Balance.getRange(281,7).setValue(id500_05BB);
}
function getValuesFromForm_Balance_016B(id200_01BB){
sheet_Balance.getRange(282,7).setValue(id200_01BB);
}
function getValuesFromForm_Balance_017B(id200_02BB){
sheet_Balance.getRange(283,7).setValue(id200_02BB);
}
function getValuesFromForm_Balance_018B(id200_03BB){
sheet_Balance.getRange(284,7).setValue(id200_03BB);
}
function getValuesFromForm_Balance_019B(id200_04BB){
sheet_Balance.getRange(285,7).setValue(id200_04BB);
}
function getValuesFromForm_Balance_020B(id200_05BB){
sheet_Balance.getRange(286,7).setValue(id200_05BB);
}
function getValuesFromForm_Balance_001C(id2000_01CC){
sheet_Balance.getRange(267,8).setValue(id2000_01CC);
}
function getValuesFromForm_Balance_002C(id2000_02CC){
sheet_Balance.getRange(268,8).setValue(id2000_02CC);
}
function getValuesFromForm_Balance_003C(id2000_03CC){
sheet_Balance.getRange(269,8).setValue(id2000_03CC);
}
function getValuesFromForm_Balance_004C(id2000_04CC){
sheet_Balance.getRange(270,8).setValue(id2000_04CC);
}
function getValuesFromForm_Balance_005C(id2000_05CC){
sheet_Balance.getRange(271,8).setValue(id2000_05CC);
}
function getValuesFromForm_Balance_006C(id1000_01CC){
sheet_Balance.getRange(272,8).setValue(id1000_01CC);
}
function getValuesFromForm_Balance_007C(id1000_02CC){
sheet_Balance.getRange(273,8).setValue(id1000_02CC);
}
function getValuesFromForm_Balance_008C(id1000_03CC){
sheet_Balance.getRange(274,8).setValue(id1000_03CC);
}
function getValuesFromForm_Balance_009C(id1000_04CC){
sheet_Balance.getRange(275,8).setValue(id1000_04CC);
}
function getValuesFromForm_Balance_010C(id1000_05CC){
sheet_Balance.getRange(276,8).setValue(id1000_05CC);
}
function getValuesFromForm_Balance_011C(id500_01CC){
sheet_Balance.getRange(277,8).setValue(id500_01CC);
}
function getValuesFromForm_Balance_012C(id500_02CC){
sheet_Balance.getRange(278,8).setValue(id500_02CC);
}
function getValuesFromForm_Balance_013C(id500_03CC){
sheet_Balance.getRange(279,8).setValue(id500_03CC);
}
function getValuesFromForm_Balance_014C(id500_04CC){
sheet_Balance.getRange(280,8).setValue(id500_04CC);
}
function getValuesFromForm_Balance_015C(id500_05CC){
sheet_Balance.getRange(281,8).setValue(id500_05CC);
}
function getValuesFromForm_Balance_016C(id200_01CC){
sheet_Balance.getRange(282,8).setValue(id200_01CC);
}
function getValuesFromForm_Balance_017C(id200_02CC){
sheet_Balance.getRange(283,8).setValue(id200_02CC);
}
function getValuesFromForm_Balance_018C(id200_03CC){
sheet_Balance.getRange(284,8).setValue(id200_03CC);
}
function getValuesFromForm_Balance_019C(id200_04CC){
sheet_Balance.getRange(285,8).setValue(id200_04CC);
}
function getValuesFromForm_Balance_020C(id200_05CC){
sheet_Balance.getRange(286,8).setValue(id200_05CC);
}
html
<!DOCTYPE html>
<html>
<body>
<!-- MODULE I ---->
<div>
<form style="border:0px solid #1f3f79; float:left; padding-left: 5px;">
<table>
<div>
<tr>
<tr>
<td>
<label>MODULE I</label>
<br>
<input type="text" value="0" id="id2000_01AA">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id2000_02AA">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id2000_03AA">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id2000_04AA">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id2000_05AA">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id1000_01AA">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id1000_02AA">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id1000_03AA">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id1000_04AA">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id1000_05AA">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id500_01AA">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id500_02AA">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id500_03AA">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id500_04AA">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id500_05AA">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id200_01AA">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id200_02AA">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id200_03AA">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id200_04AA">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id200_05AA">
</td>
</tr>
</div>
</table>
</form>
</div>
<!-- MODULE II ---->
<div>
<form style="border:0px solid #1f3f79; float:left; padding-left: 5px;">
<table>
<div>
<tr>
<tr>
<td>
<label>MODULE II</label>
<br>
<input type="text" value="0" id="id2000_01BB">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id2000_02BB">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id2000_03BB">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id2000_04BB">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id2000_05BB">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id1000_01BB">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id1000_02BB">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id1000_03BB">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id1000_04BB">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id1000_05BB">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id500_01BB">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id500_02BB">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id500_03BB">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id500_04BB">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id500_05BB">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id200_01BB">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id200_02BB">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id200_03BB">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id200_04BB">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id200_05BB">
</td>
</tr>
</div>
</table>
</form>
</div>
<!-- MODULE III ---->
<div>
<form style="border:0px solid #1f3f79; float:left; padding-left: 5px;">
<table>
<div>
<tr>
<tr>
<td>
<label>MODULE III</label>
<br>
<input type="text" value="0" id="id2000_01CC">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id2000_02CC">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id2000_03CC">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id2000_04CC">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id2000_05CC">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id1000_01CC">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id1000_02CC">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id1000_03CC">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id1000_04CC">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id1000_05CC">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id500_01CC">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id500_02CC">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id500_03CC">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id500_04CC">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id500_05CC">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id200_01CC">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id200_02CC">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id200_03CC">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id200_04CC">
</td>
</tr>
<tr>
<td>
<input type="text" value="0" id="id200_05CC">
</td>
</tr>
</div>
</table>
</form>
</div>
<div>
<input type='button' id="botonREGISTRAR" value='REGISTER' onclick="get_New_Balances()">
</div>
<script>
function get_New_Balances() {
google.script.run.getValuesFromForm_Balance_001A(document.getElementById("id2000_01AA").value);
google.script.run.getValuesFromForm_Balance_002A(document.getElementById("id2000_02AA").value);
google.script.run.getValuesFromForm_Balance_003A(document.getElementById("id2000_03AA").value);
google.script.run.getValuesFromForm_Balance_004A(document.getElementById("id2000_04AA").value);
google.script.run.getValuesFromForm_Balance_005A(document.getElementById("id2000_05AA").value);
google.script.run.getValuesFromForm_Balance_006A(document.getElementById("id1000_01AA").value);
google.script.run.getValuesFromForm_Balance_007A(document.getElementById("id1000_02AA").value);
google.script.run.getValuesFromForm_Balance_008A(document.getElementById("id1000_03AA").value);
google.script.run.getValuesFromForm_Balance_009A(document.getElementById("id1000_04AA").value);
google.script.run.getValuesFromForm_Balance_010A(document.getElementById("id1000_05AA").value);
google.script.run.getValuesFromForm_Balance_011A(document.getElementById("id500_01AA").value);
google.script.run.getValuesFromForm_Balance_012A(document.getElementById("id500_02AA").value);
google.script.run.getValuesFromForm_Balance_013A(document.getElementById("id500_03AA").value);
google.script.run.getValuesFromForm_Balance_014A(document.getElementById("id500_04AA").value);
google.script.run.getValuesFromForm_Balance_015A(document.getElementById("id500_05AA").value);
google.script.run.getValuesFromForm_Balance_016A(document.getElementById("id200_01AA").value);
google.script.run.getValuesFromForm_Balance_017A(document.getElementById("id200_02AA").value);
google.script.run.getValuesFromForm_Balance_018A(document.getElementById("id200_03AA").value);
google.script.run.getValuesFromForm_Balance_019A(document.getElementById("id200_04AA").value);
google.script.run.getValuesFromForm_Balance_020A(document.getElementById("id200_05AA").value);
google.script.run.getValuesFromForm_Balance_001B(document.getElementById("id2000_01BB").value);
google.script.run.getValuesFromForm_Balance_002B(document.getElementById("id2000_02BB").value);
google.script.run.getValuesFromForm_Balance_003B(document.getElementById("id2000_03BB").value);
google.script.run.getValuesFromForm_Balance_004B(document.getElementById("id2000_04BB").value);
google.script.run.getValuesFromForm_Balance_005B(document.getElementById("id2000_05BB").value);
google.script.run.getValuesFromForm_Balance_006B(document.getElementById("id1000_01BB").value);
google.script.run.getValuesFromForm_Balance_007B(document.getElementById("id1000_02BB").value);
google.script.run.getValuesFromForm_Balance_008B(document.getElementById("id1000_03BB").value);
google.script.run.getValuesFromForm_Balance_009B(document.getElementById("id1000_04BB").value);
google.script.run.getValuesFromForm_Balance_010B(document.getElementById("id1000_05BB").value);
google.script.run.getValuesFromForm_Balance_011B(document.getElementById("id500_01BB").value);
google.script.run.getValuesFromForm_Balance_012B(document.getElementById("id500_02BB").value);
google.script.run.getValuesFromForm_Balance_013B(document.getElementById("id500_03BB").value);
google.script.run.getValuesFromForm_Balance_014B(document.getElementById("id500_04BB").value);
google.script.run.getValuesFromForm_Balance_015B(document.getElementById("id500_05BB").value);
google.script.run.getValuesFromForm_Balance_016B(document.getElementById("id200_01BB").value);
google.script.run.getValuesFromForm_Balance_017B(document.getElementById("id200_02BB").value);
google.script.run.getValuesFromForm_Balance_018B(document.getElementById("id200_03BB").value);
google.script.run.getValuesFromForm_Balance_019B(document.getElementById("id200_04BB").value);
google.script.run.getValuesFromForm_Balance_020B(document.getElementById("id200_05BB").value);
google.script.run.getValuesFromForm_Balance_001C(document.getElementById("id2000_01CC").value);
google.script.run.getValuesFromForm_Balance_002C(document.getElementById("id2000_02CC").value);
google.script.run.getValuesFromForm_Balance_003C(document.getElementById("id2000_03CC").value);
google.script.run.getValuesFromForm_Balance_004C(document.getElementById("id2000_04CC").value);
google.script.run.getValuesFromForm_Balance_005C(document.getElementById("id2000_05CC").value);
google.script.run.getValuesFromForm_Balance_006C(document.getElementById("id1000_01CC").value);
google.script.run.getValuesFromForm_Balance_007C(document.getElementById("id1000_02CC").value);
google.script.run.getValuesFromForm_Balance_008C(document.getElementById("id1000_03CC").value);
google.script.run.getValuesFromForm_Balance_009C(document.getElementById("id1000_04CC").value);
google.script.run.getValuesFromForm_Balance_010C(document.getElementById("id1000_05CC").value);
google.script.run.getValuesFromForm_Balance_011C(document.getElementById("id500_01CC").value);
google.script.run.getValuesFromForm_Balance_012C(document.getElementById("id500_02CC").value);
google.script.run.getValuesFromForm_Balance_013C(document.getElementById("id500_03CC").value);
google.script.run.getValuesFromForm_Balance_014C(document.getElementById("id500_04CC").value);
google.script.run.getValuesFromForm_Balance_015C(document.getElementById("id500_05CC").value);
google.script.run.getValuesFromForm_Balance_016C(document.getElementById("id200_01CC").value);
google.script.run.getValuesFromForm_Balance_017C(document.getElementById("id200_02CC").value);
google.script.run.getValuesFromForm_Balance_018C(document.getElementById("id200_03CC").value);
google.script.run.getValuesFromForm_Balance_019C(document.getElementById("id200_04CC").value);
google.script.run.getValuesFromForm_Balance_020C(document.getElementById("id200_05CC").value);
}
</script>
</body>
</html>

Here is the optimized and working code. Read the change logs below.
Code.gs:
function doGet() {
var template = HtmlService.createTemplateFromFile("HTML_start_page")
return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function getValuesFromForm(inputs){
var ss = SpreadsheetApp.openByUrl("spreadsheet url");
var sheet_Balance = ss.getSheetByName("Page_1");
// use setValues to write the 2D data by bulk
sheet_Balance.getRange(267, 7, inputs.length, inputs[0].length).setValues(inputs);
}
HTML_start_page.html:
<!DOCTYPE html>
<html>
<body>
<div>
<form style="border:0px solid #1f3f79; float:left; padding-left: 5px;">
<table id="table">
<tr>
<td><label>MODULE I</label></td>
<td><label>MODULE II</label></td>
<td><label>MODULE III</label></td>
<td><label>MODULE IV</label></td>
</tr>
</table>
</form>
</div>
<div>
<input type='button' id="botonREGISTRAR" value='REGISTER' onclick="get_New_Balances()">
</div>
<script>
window.onload = function () {
// automatically generate input rows
var table = document.getElementById("table");
var row, input, cell;
for (i = 0; i < 30; i++) {
row = table.insertRow();
for (j = 0; j < 4; j++) {
input = document.createElement('input')
input.type='text';
input.value='0';
cell = row.insertCell();
cell.appendChild(input);
}
}
};
function get_New_Balances() {
var tableRows = document.getElementById("table").rows;
var myrow, mytd;
var row = [], inputs = [];
for (i = 1; i < tableRows.length; i++) {
myrow = tableRows[i];
row = [];
for (j = 0; j < myrow.cells.length; j++) {
mytd = myrow.cells[j];
row.push(mytd.children[0].value);
}
inputs.push(row);
}
google.script.run.getValuesFromForm(inputs);
}
</script>
</body>
</html>
Change logs:
HTML table is now generated by a loop.
get_New_Balances now creates a 2D array from the table, and then passes it to the new function that writes 2D data directly to the sheet
getValuesFromForm is now using setValues to write the 2D data generated from the get_New_Balances
Input:
Output:
References:
Get the values of input field of each row of html table
Add and removing rows [with input field] in a table

About the same solution as #NaziA, without auto generation the HTML:
HTML:
...
<script>
function get_New_Balances() {
var nums1 = ['2000', '1000', '500', '200'];
var nums2 = ['01', '02', '03', '04', '05'];
var letters = ['AA', 'BB', 'CC'];
var values = [];
letters.forEach(letter => nums1.forEach(n1 => nums2.forEach(n2 => {
var id = 'id' + n1 + '_' + n2 + letter;
values.push(document.getElementById(id).value);
})));
var table = new Array(values.length / letters.length).fill('');
table = table.map((_, row) =>
letters.map((_, col) => values[row + table.length * col]));
google.script.run.main(table);
}
</script>
...
GS:
function doGet() {
var template = HtmlService.createTemplateFromFile("HTML_start_page");
return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function main(table) {
var ss = SpreadsheetApp.openByUrl("URL");
var sheet_Balance = ss.getSheetByName("Page_1");
sheet_Balance.getRange(267,6,table.length,table[0].length).setValues(table);
}

Show HTML elements based on array value

I have a series of checkboxes that can accept multiple "checks." What I want to have is have a div shown for every checkbox checked.
I have it set up to capture the value of every checkbox and store it in an array. But now I'm trying to figure out how to display each element for every case, e.g., If A is selected, show A; if A and B are selected, show A & B, etc.
I started doing this as a series of if...then statements, but I feel like that will quickly become unwieldily. Then I thought about using "switch" but couldn't get that to work. Anyone have any thoughts?
function GetSelected() {
var selected = new Array();
var tblFruits = document.getElementById("tblFruits");
var chks = tblFruits.getElementsByTagName("INPUT");
for (var i = 0; i < chks.length; i++) {
if (chks[i].checked) {
selected.push(chks[i].value);
}
}
if (selected.includes("1")) {
document.getElementById("mango").style.display = "block";
}
else if (selected.includes("1") && selected.includes("2")) {
document.getElementById("mango").style.display = "block" ;
document.getElementById("apple").style.display = "block" ;
}
else {
console.log("Oops");
}
console.log(selected.includes("2"));
}
#mango, #apple, #banana, #guava, #orange {
display: none;
}
<table id="tblFruits">
<tr>
<td><input id="chkMango" type="checkbox" value="1"/><label for="chkMango">Mango</label></td>
</tr>
<tr>
<td><input id="chkApple" type="checkbox" value="2"/><label for="chkApple">Apple</label></td>
</tr>
<tr>
<td><input id="chkBanana" type="checkbox" value="3"/><label for="chkBanana">Banana</label></td>
</tr>
<tr>
<td><input id="chkGuava" type="checkbox" value="4"/><label for="chkGuava">Guava</label></td>
</tr>
<tr>
<td><input id="chkOrange" type="checkbox" value="5"/><label for="chkOrange">Orange</label></td>
</tr>
</table>
<br />
<input type = "button" value = "Get" onclick = "GetSelected()" />
<p> </p>
<div class="wrapper">
<div id="mango">Mango</div>
<div id="apple">Apple</div>
<div id="banana">Banana</div>
<div id="guava">Guava</div>
<div id="orange">Orange</div>
</div>

You are over complicating this. There is a one to one relationship between the checkboxes and the content elements.
Just loop over the checkboxes and parse their id to get the associated content id and within that loop update the display of the associated content element every iteration.
Or do the reverse , loop over the content elements and see if the associated checkbox is checked.
You could make it even simpler by setting the values as the content id and skip a line of parsing the checkbox id. Then the content id would be el.value
function GetSelected() {
document.querySelectorAll('#tblFruits input').forEach((el) => {
const contentId = el.id.replace('chk', '').toLowerCase()
document.getElementById(contentId).style.display = el.checked ? 'block' : 'none';
});
}
#mango,
#apple,
#banana,
#guava,
#orange {
display: none;
}
<table id="tblFruits">
<tr>
<td><input id="chkMango" type="checkbox" value="1" /><label for="chkMango">Mango</label></td>
</tr>
<tr>
<td><input id="chkApple" type="checkbox" value="2" /><label for="chkApple">Apple</label></td>
</tr>
<tr>
<td><input id="chkBanana" type="checkbox" value="3" /><label for="chkBanana">Banana</label></td>
</tr>
<tr>
<td><input id="chkGuava" type="checkbox" value="4" /><label for="chkGuava">Guava</label></td>
</tr>
<tr>
<td><input id="chkOrange" type="checkbox" value="5" /><label for="chkOrange">Orange</label></td>
</tr>
</table>
<br />
<input type="button" value="Get" onclick="GetSelected()" />
<p> </p>
<div class="wrapper">
<div id="mango">Mango</div>
<div id="apple">Apple</div>
<div id="banana">Banana</div>
<div id="guava">Guava</div>
<div id="orange">Orange</div>
</div>

In your solution selected array contains entire htmlElement and not just value of the checkbox, but you are treating array as in it contains only value.
This will solve your problem 😉
function clearSelection() {
const divs = document.querySelectorAll('.wrapper > div');
[...divs].forEach(div => {
div.style.display = 'none';
});
}
function GetSelected() {
clearSelection()
var tblFruits = document.getElementById("tblFruits");
var chks = tblFruits.getElementsByTagName("INPUT");
const selected = Array.prototype.filter.call(chks, checkbox => checkbox.checked).map(data => data.id);
selected.forEach(id => {
var resultId = id.slice(3).toLowerCase();
document.getElementById(resultId).style.display = 'block';
})
}
#mango, #apple, #banana, #guava, #orange {
display: none;
}
<table id="tblFruits">
<tr>
<td><input id="chkMango" type="checkbox" value="1"/><label for="chkMango">Mango</label></td>
</tr>
<tr>
<td><input id="chkApple" type="checkbox" value="2"/><label for="chkApple">Apple</label></td>
</tr>
<tr>
<td><input id="chkBanana" type="checkbox" value="3"/><label for="chkBanana">Banana</label></td>
</tr>
<tr>
<td><input id="chkGuava" type="checkbox" value="4"/><label for="chkGuava">Guava</label></td>
</tr>
<tr>
<td><input id="chkOrange" type="checkbox" value="5"/><label for="chkOrange">Orange</label></td>
</tr>
</table>
<br />
<input type = "button" value = "Get" onclick = "GetSelected()" />
<p> </p>
<div class="wrapper">
<div id="mango">Mango</div>
<div id="apple">Apple</div>
<div id="banana">Banana</div>
<div id="guava">Guava</div>
<div id="orange">Orange</div>
</div>

I would recommend avoiding situations in which you hard-code multiple conditions-- it scales very poorly. Instead, I would find a way to link each checkbox to an option and simply loop the results. In the below, we get the associated text label and use it to find the matched div by id to show it:
function GetSelected() {
var selected = new Array();
var tblFruits = document.getElementById("tblFruits");
var chks = tblFruits.getElementsByTagName("INPUT");
// clear all previously shown options
const divs = document.querySelectorAll('.wrapper > div');
[...divs].forEach(div => {
div.style.display = 'none';
});
for (var i = 0; i < chks.length; i++) {
if (chks[i].checked) {
let value = chks[i].value;
let text = chks[i].labels[0].textContent.toLowerCase();;
selected.push(value);
document.querySelector(`#${text}`).style.display = 'block';
}
}
// do anything else you need with the checkbox array
}
#mango, #apple, #banana, #guava, #orange {
display: none;
}
<table id="tblFruits">
<tr>
<td><input id="chkMango" type="checkbox" value="1"/><label for="chkMango">Mango</label></td>
</tr>
<tr>
<td><input id="chkApple" type="checkbox" value="2"/><label for="chkApple">Apple</label></td>
</tr>
<tr>
<td><input id="chkBanana" type="checkbox" value="3"/><label for="chkBanana">Banana</label></td>
</tr>
<tr>
<td><input id="chkGuava" type="checkbox" value="4"/><label for="chkGuava">Guava</label></td>
</tr>
<tr>
<td><input id="chkOrange" type="checkbox" value="5"/><label for="chkOrange">Orange</label></td>
</tr>
</table>
<br />
<input type = "button" value = "Get" onclick = "GetSelected()" />
<p> </p>
<div class="wrapper">
<div id="mango">Mango</div>
<div id="apple">Apple</div>
<div id="banana">Banana</div>
<div id="guava">Guava</div>
<div id="orange">Orange</div>
</div>
This solution attempted to not touch/change any of the markup. It's super flimsy as is-- all you need is for the label to have a space and it falls apart. Instead, consider using data- attributes to provide more concrete links between the two pieces of markup that can be used to connect them and make changes as need in a manner that is derived.

Try like this
checkbox value and fruits div having relation. If checkbox banana is checked then div with id banana will get displyed and other div style will set to display:none.
<table id="tblFruits">
<tr>
<td><input id="chkMango" type="checkbox" value="mango"/><label for="chkMango">Mango</label></td>
</tr>
<tr>
<td><input id="chkApple" type="checkbox" value="apple"/><label for="chkApple">Apple</label></td>
</tr>
<tr>
<td><input id="chkBanana" type="checkbox" value="banana"/><label for="chkBanana">Banana</label></td>
</tr>
<tr>
<td><input id="chkGuava" type="checkbox" value="guava"/><label for="chkGuava">Guava</label></td>
</tr>
<tr>
<td><input id="chkOrange" type="checkbox" value="orange"/><label for="chkOrange">Orange</label></td>
</tr>
</table>
<br />
<input type = "button" value = "Get" onclick = "GetSelected()" />
<p> </p>
<div class="wrapper">
<div id="mango">Mango</div>
<div id="apple">Apple</div>
<div id="banana">Banana</div>
<div id="guava">Guava</div>
<div id="orange">Orange</div>
</div>
function GetSelected() {
var selected = new Array();
var tblFruits = document.getElementById("tblFruits");
var chks = tblFruits.getElementsByTagName("INPUT");
// this for loop will check checkbox current value and will hide fruits divs
for (var i = 0; i < chks.length; i++) {
if (chks[i].checked) {
selected.push(chks[i].value);
document.getElementById(chks[i].value).style.display = "block";
} else {
document.getElementById(chks[i].value).style.display = "none";
}
}
console.log(selected); // All selected fruit stored in this array will diaplyed on console
}
Here is working demo https://playcode.io/657247/

Using a for loop and function to calculate row total on a table

I think this should be simple but just can't get it right...I am trying to get row total on a table that has incrementing ids like:
<table id="myTable" class="form">
<thead>
<tr>
....
</tr>
</thead>
<tbody>
<tr class="">
<td>
<input type="number" name="quantity" id="item-0-quantity">
</td>
<td>
<input type="number" name="unit_price"id="item-0-unit_price">
</td>
<td>
<td>
<input type="number" name="quantity" id="item-1-quantity">
</td>
<td>
<input type="number" name="unit_price"id="item-1-unit_price">
</td>
...etc
<td>
</tr>
</tbody>
</table>
I initially used the method below for each row's total calculation and it worked, but it's not efficient.
for first row: $('#item-0-quantity, #item-0-unit-price').on('input',function(e){
$('#Total').val(parseFloat($('#item-0-quantity').val()) * parseFloat($('#item-0-
unit-price').val()));
for second row: $('#item-1-quantity, #item-1-unit-price').on('input',function(e){
$('#Total').val(parseFloat($('#item-1-quantity').val()) * parseFloat($('#item-1-
unit-price').val()));
...and so on.
I thought i would better to use a For Loop to iterate and update the value of i based on a rowCounter like:
var rowCounter = $("#myTable tr").length - 1;
for (var i = 0; i <= rowCounter; i++) {
$('#item-'+i+'-quantity, #item-'+i+'-unit-price').on('input',function(e){
$('#Total').val(parseFloat($('#item-'+i+'-quantity').val()) * parseFloat($('#item-'+i+'-unit-price').val()));
});
}
When i input values(quantity and unit-price), i don't get the total.The For Loop doesn't work. Please help,thanks.

Try this:
//loop by name
$("input[name=quantity], input[name=unit_price]").on('input', function () {
var total = 0;
$("input[name=quantity]").each(function (i, e) {
total += $(this).val() * $(e).closest("tr").find("input[name=unit_price]").val();
});
$('#Total').val(total);
});
//loop by table
$("#myTable input[type=number]").on('input', function () {
var total = 0;
$("#myTable tr").each(function (i, e) {
if (document.getElementById("item-" + i + "-quantity") && document.getElementById("item-" + i + "-unit_price")) {//just check if elements exists
total += $(e).find("#item-" + i + "-quantity").val() * $(e).find("#item-" + i + "-unit_price").val();
}
});
$('#Total_by_table_rows').val(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="form">
<tbody>
<tr class="">
<td>
<input type="number" name="quantity" id="item-0-quantity">
</td>
<td>
<input type="number" name="unit_price"id="item-0-unit_price">
</td>
</tr>
<tr>
<td>
<input type="number" name="quantity" id="item-1-quantity">
</td>
<td>
<input type="number" name="unit_price"id="item-1-unit_price">
</td>
</tr>
</tbody>
</table>
<label> Total:
<input id="Total">
</label>
<label> Total by table rows:
<input id="Total_by_table_rows">
</label>

Because the content you want to sum is identified with the "quantity" and "unit_price" name attributes, you can use this:
$('tr').each(function() {
sum += $('input[name="quantity"]', this).val() * $('input[name="unit_price"]', this).val();
})
The second parameter in the selector (this in our case) give jQuery a context for the search, i.e., each of the rows of the table.
Here you have the snippet:
$('#calculate').click(function() {
var sum = 0;
$('tr').each(function() {
sum += $('input[name="quantity"]', this).val() * $('input[name="unit_price"]', this).val();
})
$('#result').text(sum);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="form">
<tbody>
<tr>
<td>
<input type="number" name="quantity" value="0">
</td>
<td>
<input type="number" name="unit_price" value="0">
</td>
</tr>
<tr>
<td>
<input type="number" name="quantity" value="0">
</td>
<td>
<input type="number" name="unit_price" value="0">
</td>
</tr>
</tbody>
</table>
<input type="button" value="Calculate" id="calculate">
<div>
Result: <span id="result"></span>
</div>

Here you can do like this.
Your code is not working becuase of
var rowCounter = $("#myTable tr").length - 1;
for (var i = 0; i <= rowCounter; i++) {
$('#item-'+i+'-quantity, #item-'+i+'-unit-price').on('input',function(e){
$('#Total').val(parseFloat($('#item-'+i+'-quantity').val()) * parseFloat($('#item-'+i+'-unit-price').val()));
});
}
For Loop was executes before your type in input fields.
And also you have some mistake in code too like here you wrote $('#item-'+i+'-unit-price') but it should be like this $('#item-'+i+'-unit_price')
var quantity = $("input[name='quantity']");
$("input[name='quantity'], input[name='unit_price']").on('input',function(){
var total = 0;
$(quantity).each(function(){
total += parseFloat($(this).val()) * parseFloat($(this).parent().next().find("input[name='unit_price']").val());
});
$("#Total span").html(total);
});
td {
width: 80%;
float: left;
margin-left: 10px;
}
label {
width: 20%;
float: left
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="form">
<tbody>
<tr class="">
<td>
<label>Quantity 1</label>
<input type="number" name="quantity" id="item-0-quantity" />
</td>
<td>
<label>Unit Price 1</label>
<input type="number" name="unit_price"id="item-0-unit_price" />
</td>
<td>
<label>Quantity 1</label>
<input type="number" name="quantity" id="item-1-quantity" />
</td>
<td>
<label>Unit Price 1</label>
<input type="number" name="unit_price"id="item-1-unit_price" />
</td>
<td id="Total">
<label>Total</label>
<span></span>
</td>
</tr>
</tbody>
</table>

Multiple instances of same calculator in Javascript

I am new to Javascript and trying to create an on-line score tracker for a card game I play called Hand and Foot. The rules are this, 3 teams play 4 games, the team with the most points at the end wins. I have created a calculator for 1 person for 1 game, but when I duplicate it for the 11 more instances I need, the calculations stop working which I believe has to do with the getElementById not registering with the multiple instances in the html. I would be grateful suggestions on a more elegant way to create instances of this calculator on the same page without having to change the IDs of each field for each play and each game. check out my code Fiddle
<div class="P1G1">
<h1>Game 1</h1>
<form id="calcP1G1">
<h2>Neccessary Piles</h2>
<table>
<td>Clean</td>
<td align="center">
<input id="necCleanP1G1" type="checkbox" class="addon" value="500">
</td>
<td>Dirty</td>
<td align="center">
<input id="necDirtyP1G1" type="checkbox" class="addon" value="300">
</td>
<td>Sevens</td>
<td align="center">
<input id="necSevenP1G1" type="checkbox" class="addon" value="5000">
</td>
<td>Fives</td>
<td align="center">
<input id="necFiveP1G1" type="checkbox" class="addon" value="3000">
</td>
<td>Wilds</td>
<td align="center">
<input id="necWildP1G1" type="checkbox" class="addon" value="2500">
</td>
<td id="necTotalP1G1" style="display:none"></td>
</table>
<hr>
<table>
<tr>
<th class="pile-header">Clean Piles</th>
<th></th>
</tr>
<tr>
<td class="input-number">
<input id="cleanP1G1" type="text" value="0" oninput="calculate()" class="form-control" />
</td>
<td class="result-number">
<input id="resultCleanP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
<tr>
<th class="pile-header">Dirty Piles</th>
<th></th>
</tr>
<tr>
<td class="input-number">
<input id="dirtyP1G1" type="text" oninput="calculate()" value="0" class="form-control" />
</td>
<td class="result-number">
<input id="resultDirtyP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
<tr>
<th class="pile-header">Red 3s</th>
<th></th>
</tr>
<tr>
<td class="input-number">
<input id="redThreeP1G1" oninput="calculate()" value="0" class="form-control" />
</td>
<td class="result-number">
<input id="resultRedThreeP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
<tr>
<th class="pile-header">Card Count</th>
<th></th>
</tr>
<tr>
<td class="input-number">
<input id="cardsP1G1" oninput="calculate()" value="0" class="form-control" />
</td>
<td class="result-number">
<input id="resultCardP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
<tr>
<td class="pile-header">Total</td>
<td class="result-number">
<input id="resultTotalP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
</table>
</form>
</div>
Javascript
function updateTotal() {
var add = 0;
var form = document.getElementById("calcP1G1");
var checkboxes = form.getElementsByClassName('addon');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
add += parseInt(checkboxes[i].value, 10);
}
}
var amount = document.getElementById("necTotalP1G1").innerHTML = add;
}
document.getElementById("calcP1G1").addEventListener('change', updateTotal);
// Run it once at startup
updateTotal();
function calculate() {
var topCards = document.getElementById("necTotalP1G1").innerHTML;
var cleanBox = document.getElementById("cleanP1G1").value;
var totalClean = document.getElementById("resultCleanP1G1");
var resultClean = cleanBox * 500;
totalClean.value = resultClean;
//---------------------//
var dirtyBox = document.getElementById("dirtyP1G1").value;
var totalDirty = document.getElementById("resultDirtyP1G1");
var resultDirty = dirtyBox * 300;
totalDirty.value = resultDirty;
//---------------------//
var redThreeBox = document.getElementById("redThreeP1G1").value;
var totalRedThree = document.getElementById("resultRedThreeP1G1");
var resultRedThree = redThreeBox * 100;
totalRedThree.value = resultRedThree;
//---------------------//
var cardBox = document.getElementById("cardsP1G1").value;
var totalCard = cardBox;
document.getElementById("resultCardP1G1").value = totalCard;
//---------------------//
var total = parseInt(resultDirty) + parseInt(resultClean) + parseInt(resultRedThree) + parseInt(totalCard) + parseInt(topCards);
document.getElementById("resultTotalP1G1").value = total;
}
document.getElementById("calcP1G1").addEventListener('change', calculate);
// Run it once at startup
calculate();

Categories