building a javascript invoice system - javascript

ok, I'll try this again, my bad.
I am trying to build a very simple php invoice system just for inputting data, writing it to a database, and ultimately sending the Info to a file for printing. The problem I am haviung, besides being pretty new to javascript is getting a grand total from multiple lines of items and totals. I will post the page I have started to work with
<script type="text/javascript">
function add()
{
var a = parseInt(document.frm.A.value);
var b = parseInt(document.frm.B.value);
var result = parseInt(document.frm.Result.value);
var result=a*b;
document.frm.Result.value=result;
}
</script>
<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
}
body {
background-color: #000;
}
</style>
HTML:
<form name="frm">
<p> </p>
<table width="66%" border="1">
<tr bgcolor="#B80000">
<td width="60%"><div align="center">Item Description</div></td>
<td width="11%"><div align="center">Price Per</div></td>
<td width="15%"><div align="center">Quantity</div></td>
<td width="14%"><div align="center">SubTotal</div></td>
</tr>
<tr>
<td><div align="center">
<input name="item" type="Text" id="item" size="100" >
</div></td>
<td><div align="center">
<input name="A" type="Text" id="A" onChange="add()" size="5" >
</div></td>
<td><div align="center">
<input name="B" type="Text" id="B" onChange="add()" size="5" >
</div></td>
<td><div align="center">
<input name="Result" type="Text" id="Result" size="8" >
</div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center">
TOTAL:
<input name="Total" type="Text" id="Total" size="8">
</div></td>
</tr>
</table>
</form>
So I am trying to figure out how to take the total from the SubTotal column and have it summed in the TOTAL field. If I have multiple rows, i need to have all the subtotals added together. Been working on it for days and cant figure it out.
If I have multiple rows setup this way:
<form name="frm">
<p> </p>
<table width="66%" border="1">
<tr bgcolor="#B80000">
<td width="60%"><div align="center">Item Description</div></td>
<td width="11%"><div align="center">Price Per</div></td>
<td width="15%"><div align="center">Quantity</div></td>
<td width="14%"><div align="center">SubTotal</div></td>
</tr>
<tr>
<td><div align="center">
<input name="item" type="Text" id="item" size="100" >
</div></td>
<td><div align="center">
<input name="A" type="Text" id="A" onChange="Adder()" size="5" >
</div></td>
<td><div align="center">
<input name="B" type="Text" id="B" onChange="Adder()" size="5" >
</div></td>
<td><div align="center">
<input name="Result" type="Text" id="Result" size="8" >
</div></td>
</tr>
<tr>
<td><div align="center">
<input name="item2" type="Text" id="item2" size="100" >
</div></td>
<td><div align="center">
<input name="A2" type="Text" id="A2" onChange="Adder()" size="5" >
</div></td>
<td><div align="center">
<input name="B2" type="Text" id="B2" onChange="Adder()" size="5" >
</div></td>
<td><div align="center">
<input name="Result2" type="Text" id="Result2" size="8" >
</div></td>
</tr>
<tr>
<td><div align="center">
<input name="item3" type="Text" id="item3" size="100" >
</div></td>
<td><div align="center">
<input name="A3" type="Text" id="A3" onChange="Adder()" size="5" >
</div></td>
<td><div align="center">
<input name="B3" type="Text" id="B3" onChange="Adder()" size="5" >
</div></td>
<td><div align="center">
<input name="Result3" type="Text" id="Result3" size="8" >
</div></td>
</tr>
<tr>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center">
TOTAL:
<input name="Total" type="Text" id="Total" size="8" onChange="Adder()" >
</div></td>
</tr>
</table>
</form>
will the javascript work when I add the other elements to it? or am i going in the wrong direction


From the perspective of your current code, the following would work:
function add() {
var a = parseInt(document.frm.A.value);
var b = parseInt(document.frm.B.value);
var result = parseInt(document.frm.Result.value); // <-- This line is unnecessary
var result = a * b;
document.frm.Result.value = result;
document.frm.Total.value = result; // I added this line
}
EDITED: I came up with a slightly cumbersome method of scaling the above with multiple rows as follows.
Give specific ID's to each of your rows and their result pairs like so:
<input name="A" type="Text" id="A1" onChange="add(1)" size="5" />
<!-- ... -->
<input name="B" type="Text" id="B1" onChange="add(1)" size="5" />
<!-- ... -->
<input name="Result" type="Text" id="Result1" size="8" />
(the next row would then have the number 2 added where you have 1 above)
You could then use the following js:
function add(row) {
var a = parseInt(document.getElementById('A'+row).value);
var b = parseInt(document.getElementById('B'+row).value);
if (a > 0 && b > 0) {
document.getElementById('Result'+row).value = a * b;
document.getElementById('Total').value = parseInt(document.getElementById('Result1').value) + parseInt(document.getElementById('Result2').value);
}
}
I'm sure this could be done in a better way, but I believe it's a good one to start with...
Here you can play with a demo.


Try:
function add(){
var table = document.getElementsByTagName('table')[0];
var tr = table.getElementsByTagName('tr'), sum = 0;
for(var i=1,l=tr.length; i<l; i++){
var inputs = tr[i].getElementsByTagName('input'), sub = 1;
for(var n=1; n<3; n++){
sub *= inputs[n].value;
}
sum += inputs[3].value = sub;
}
totalNode.innerHTML = sum;
}
Swap out totalNode with the div you want your total in. I would actually not use inputs for your subtotals as well, but that would require I rewrite this function. I also don't recommend putting JavaScript into your HTML like that, usually. You'll learn.

Related

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);
}

How to iterate this.value in javascript

I am trying to compare this.value with Drupal.settings["pis_var" + i].hasOwnProperty(j).
However, I am not able to iterate this.value. It is just comparing with first value not one by one.
Any suggestions would be appreciated.
var controllers = $("[data-drupal]");
var pis = $("[data-pis]");
var i = 0;
var controller = $(controllers[i]);
var inventory = $(pis[i]);
var index = 0;
$(controllers[i]).each(function (index) {
console.log(Drupal.settings["pis_var" + i]);
console.log(this.value);
var j=0;
for (j in Drupal.settings["pis_var" + i])
{
if (Drupal.settings["pis_var" + i].hasOwnProperty(j))
{
console.log(Drupal.settings["pis_var" + i][j] + '--' + i + '--' + j + '--' + this.value);
if (this.value !== Drupal.settings["pis_var" + i][j])
{
console.log(this.value + '--' + Drupal.settings["pis_var" + i][j]);
}
}
}
i++;
});
HTML code ( which is drupal code)
I have derived from the page source.
<table>
<tbody>
<tr>
<td class="label">Experiment #: <span class="form-required" title="This field is required.">*</span></td>
<td><div class="form-item" id="ExExCode-wrapper">
<input type="text" maxlength="8" name="ExExCode" id="ExExCode" size="8" value="201914" data-drupal="pic_code" data-pis="ExExCode_pis" class="form-text required" />
</div>
</td>
</tr>
<tr>
<td class="label">Experiment Name <span class="form-required" title="This field is required.">*</span></td>
<td><div class="form-item" id="edit-ExName-wrapper">
<input type="text" maxlength="60" name="ExName" id="edit-ExName" size="60" value="Seismic sliding law" data-drupal="ExName" data-pis="ExName_pis" class="form-text required" />
</div>
</td>
</tr>
<tr>
<td class="label">Experiment Description <span class="form-required" title="This field is required.">*</span></td>
<td><div class="form-item" id="edit-ExDesc-wrapper">
<input type="text" maxlength="80" name="ExDesc" id="edit-ExDesc" size="80" value="Using passive seismics to determin a glacier sliding law" data-drupal="ExDesc" data-pis="ExDesc_pis" class="form-text required" />
</div>
</td>
</tr>
<tr>
<td class="label">Sponsor</td>
<td><div class="form-item" id="edit-ExSponsor-wrapper">
<input type="text" maxlength="18" name="ExSponsor" id="edit-ExSponsor" size="18" value="UNIV/N/A" data-drupal="ExSponsor" data-pis="ExSponsor_pis" class="form-text" />
</div>
</td>
</tr>
<tr>
<td class="label">Sensors</td>
<td><div class="form-item" id="edit-types-Sensor-wrapper">
<input type="text" maxlength="25" name="types_Sensor" id="edit-types-Sensor" size="25" value="" data-drupal="types_Sensor" data-pis="types_Sensor_pis" class="form-text" />
</div>
</td>
</tr>
<tr>
<td class="label">Recorders</td>
<td><div class="form-item" id="edit-types-Recorder-wrapper">
<input type="text" maxlength="25" name="types_Recorder" id="edit-types-Recorder" size="25" value="" data-drupal="types_Recorder" data-pis="types_Recorder_pis" class="form-text" />
</div>
</td>
</tr>
<tr>
<td class="label">Foreign?</td>
<td><div class="form-radios"><div class="form-item" id="edit-ExDF-N-wrapper">
<label class="option" for="edit-ExDF-N"><input type="radio" id="edit-ExDF-N" name="ExDF" value="N" data-drupal="ExDF" data-pis="ExDF_pis" class="form-radio" /> NO</label>
</div>
<div class="form-item" id="edit-ExDF-Y-wrapper">
<label class="option" for="edit-ExDF-Y"><input type="radio" id="edit-ExDF-Y" name="ExDF" value="Y" data-drupal="ExDF" data-pis="ExDF_pis" class="form-radio" /> Yes</label>
</div>
</div></td>
</tr>
<tr>
<td class="label">Billing Address</td>
<td><div class="form-item" id="edit-ExBilling-wrapper">
<textarea cols="50" rows="10" name="ExBilling" id="edit-ExBilling" data-drupal="ExBilling" data-pis="ExBilling_pis" class="form-textarea resizable "></textarea>
</div>
<div class="textarea-identifier description">CKEditor: the ID for excluding or including this element is <em>passcal:sdb/expt/201914/pisreview.edit-ExBilling</em>.</div></td>
</tr>
Thank you in advance.

You're only iterating over one controller. $(controllers[i]) is evaluated when the .each() starts, so it just uses i=0, it doesn't go to the next controller when you do i++.
You should use
controllers.each(function(i) {
...
})
There's no need for you to increment i yourself.

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();

Javascript: Add multiple fields together and insert into Totals column on Form

I am new to javascript and am making a basic HTML timesheet form. I am simply trying to add the various hour types (Regular, overtime, sick, etc.) together and put that calculated value into a "Total hours" text box. Here is my function that I attempted (I am only using the 1 text box for now but would like advice on how to incorporate the others):
<script>
function findTotal(hours, tot) {
var hours = document.getElementsbyID('hours1').value;
var tot = 0;
for (var i = 0; i < hours.length; i++) {
if (parseInt(hours[i].value))
tot += parseInt(hours[i].value);
}
document.getElementById('total').value = tot;
}
</script>
Here is the corresponding HTML form section:
<b>HOURS</b>
<table width="25%" border="1" cellpadding="0" cellspacing="0" style="background-color: #ffffff;">
<tr valign="Top">
<td style="border-width : 0px;">
<br /><b>Regular</b>
</td>
<td style="border-width : 0px;">
<br />
<input type="text" onblur="findTotal(hours)" id="hours1" size="5">
</td>
</tr>
<tr valign="top">
<td style="border-width : 0px;">
<br /><b>Overtime</b>
</td>
<td style="border-width : 0px;">
<br />
<input type="text" onblur="findTotal()" id="hours2" size="5">
</td>
</tr>
<tr valign="top">
<td style="border-width : 0px;">
<br /><b>Sick</b>
</td>
<td style="border-width : 0px;">
<br />
<input type="text" onblur="findTotal()" id="hours3" size="5">
</td>
</tr>
<tr valign="top">
<td style="border-width : 0px;">
<br /><b>Holiday</b>
</td>
<td style="border-width : 0px;">
<br />
<input type="text" onblur="findTotal()" id="hours4" size="5">
</td>
</tr>
<tr valign="top">
<td style="border-width : 0px;">
<br /><b>Vacation</b>
</td>
<td style="border-width : 0px;">
<br />
<input type="text" onblur="findTotal()" id="hours5" size="5">
</td>
</tr>
<tr valign="top">
<td style="border-width : 0px;">
<br /><b>Leave</b>
</td>
<td style="border-width : 0px;">
<br />
<input type="text" onblur="findTotal()" id="hours6" size="5">
</td>
</tr>
<tr valign="top">
<td style="border-width : 0px;">
<br /><b>Jury Duty</b>
</td>
<td style="border-width : 0px;">
<br />
<input type="text" onblur="findTotal()" id="hours7" size="5">
</td>
</tr>
<tr valign="top">
<td style="border-width : 0px;">
<br /><b>TOTAL HOURS</b>
</td>
<td style="border-width : 0px;">
<br />
<input type="text" onblur="findTotal()" size="5" id="total">
</td>
</tr>
</table>
Thank you in advance for your help!
-Matt

If you do the same things many times, think about how you could do it generically with CSS (selector) or JavaScript (loop).
Cleaned up HTML:
<b>HOURS</b>
<table id="myTable" width="25%">
<tr valign="top">
<td>Regular</td>
<td>
<input type="text" size="5" />
</td>
</tr>
<tr valign="top">
<td>Overtime</td>
<td>
<input type="text" size="5" />
</td>
</tr>
<tr valign="top">
<td>Sick</td>
<td>
<input type="text" size="5" />
</td>
</tr>
<tr valign="top">
<td>Holiday</td>
<td>
<input type="text" id="hours4" size="5" />
</td>
</tr>
<tr valign="top">
<td>Vacation
</td>
<td>
<input type="text" size="5" />
</td>
</tr>
<tr valign="top">
<td>Leave</td>
<td>
<input type="text" size="5" />
</td>
</tr>
<tr valign="top">
<td>Jury Duty</td>
<td>
<input type="text" size="5" />
</td>
</tr>
<tr valign="top">
<td>TOTAL HOURS</td>
<td>
<input type="text" size="5" id="total" />
</td>
</tr>
</table>
It is good pratice to separate JavaScript and HTML.
If you work with HTML and JavaScript, it's good to understand how you could access, e.g here the table, without class (getElementsByClassName) and without id (getElementById).
Go through the table rows in the table. Therefore there are rows and cells:
var table = document.getElementById("myTable");
var rows = table.rows;
var rowsLength = rows.length // the number of all rows in the table
Example first row first cell:
var firstRowFirstCell = rows[0].cells[0];
Here, we go through the rows without the last row (total) rowsLength - 1. The input is in the second cell. Therefore we need document.getElementsByTagName
var input = rows[i].cells[1].getElementsByTagName("input");
to add addEventListener:
input[0].addEventListener("blur", function() { ... });
for every input except total (the last one). Assign
function totalHours(containerID) {
var table = document.getElementById(containerID);
var rows = table.rows;
var rowsLength = rows.length;
var total = 0;
for(var i = 0; i < (rowsLength - 1); i += 1) { // not the TOTAL input!
var input = rows[i].cells[1].getElementsByTagName("input");
if(input[0].value !== "") { // no empty inputs
total += parseInt(input[0].value);
}
}
return total;
}
to them.
Full example

Javascript math show decimal places

I almost have this working however the script is rounding my numbers while I wish to keep both decimals places for a full price instead of being automatically rounded up. My sandbox for this script is here:
http://www.zacharydesigns.com/sandbox/calculatorJS2.html
and here is the code:
<script type="text/javascript">
function update1() {
var a = +document.forms['calc'].elements['productOne'].value,
b = +document.forms['calc'].elements['productTwo'].value,
c = +document.forms['calc'].elements['productThree'].value,
productTotal = Math.floor(a/(a+b+c)*399.99);
document.forms['calc'].elements['productTotal1'].value = productTotal;
return false;
}
function update2() {
var a = +document.forms['calc'].elements['productOne'].value,
b = +document.forms['calc'].elements['productTwo'].value,
c = +document.forms['calc'].elements['productThree'].value,
productTotal = Math.floor(b/(a+b+c)*399.99);
document.forms['calc'].elements['productTotal2'].value = productTotal;
return false;
}
function update3() {
var a = +document.forms['calc'].elements['productOne'].value,
b = +document.forms['calc'].elements['productTwo'].value,
c = +document.forms['calc'].elements['productThree'].value,
productTotal = Math.floor(c/(a+b+c)*399.99);
document.forms['calc'].elements['productTotal3'].value = productTotal;
return false;
}
</script>
<form name="calc" action="#">
<table align="center"
border="1"><tr><td align="right">Boots: </td>
<td align="left"><input type="text" name="productOne" size="5" />
</td>
<td colspan="2" align="center">
<input type="button" value="Calculate"
onclick="update1();" /> </td>
<td align="right">Product Total:</td><td align="left">
<input type="text" name="productTotal1" size="6"
readonly="readonly" /></td>
</tr>
<tr>
<td align="right">Bindings: </td>
<td align="left"><input type="text" name="productTwo" size="5" />
</td>
<td colspan="2" align="center">
<input type="button" value="Calculate"
onclick="update2();" /> </td>
<td align="right">Product Total:</td><td align="left">
<input type="text" name="productTotal2" size="6"
readonly="readonly" /></td>
</tr><tr>
<td align="right">Boards: </td>
<td align="left"><input type="text" name="productThree" size="5" />
</td>
<td colspan="2" align="center">
<input type="button" value="Calculate"
onclick="update3();" /> </td>
<td align="right">Product Total:</td><td align="left">
<input type="text" name="productTotal3" size="6"
readonly="readonly" /></td>
</tr><tr></tr>
</tr>
</table></form>
Can someone please tell me how I can have math operated on the full number without rounding it?

I think that the issue is that you are using the floor operator. The floor operator always rounds down to the nearest integer so:
floor(3.5) == 3
floor(5.9999999999999999999999999999) = 5
floor(5) = 5
And I think you get the drift. That you want to do is format the decimal places and the toFixed() function is for that.
So basically, change these lines:
productTotal = Math.floor(c/(a+b+c)*399.99);
To:
productTotal = (c/(a+b+c)*399.99).toFixed(2);
And I think that will be what you want.

Categories