We Keep Coding

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

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

Edit specific row and reset particular fields of a form not working

I have created a form, here when click on edit button from a dynamically created table it is not fetching the form values.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Generate Challan </title>
<link type="text/css" href="styles.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://code.google.com/p/jquery-json/downloads/detail?name=jquery.json-2.2.min.js"></script>
<script type="text/javascript">
data = new Array();
$(document).ready(function(){
$(".addbutton").click(function() {
var row = new Array(12);
row[0] = $("#txtbox1").val();
row[1] = $("#txtbox2").val();
row[2] = $("#txtbox3").val();
row[3] = $("#txtbox4").val();
row[4] = $("#H1").val();
row[5] = $("#I1").val();
row[6] = $("#G1").val();
row[7] = $("#J1").val();
row[8] = $("#B1").val();
row[9] = $("#C1").val();
row[10] = $("#D1").val();
row[11] = $("#E1").val();
data.push(row);
refresh();
});
$('#myform')[0].reset(); //reset form stmt
//Edit function
var $tds = null;
$('#datatable').on('click', 'td:last-child', function (e) {
var $tr = $(this).parent(),
$tds = $tr.children(),
sname = $tds.eq(0).text().trim(),
mon = $tds.eq(1).text().trim();
year = $tds.eq(2).text().trim();
$('#G1 option').each(function () {
if ($(this).text().trim() == sname) {
$(this).prop('selected', true);
return false;
}
});
$('#H1 option').each(function () {
if ($(this).text().trim() == mon) {
$(this).prop('selected', true);
return false;
}
});
$('#I1 option').each(function () {
if ($(this).text().trim() == year) {
$(this).prop('selected', true);
return false;
}
});
$('#J1').val($tds.eq(3).text().trim())
$('#E1').val($tds.eq(4).text().trim())
e.preventDefault();
});
$("#myform").submit(function(){
var val = $.toJSON(data);
$("#data").attr("value",val);
if(data.length == 0){
alert("Table is empty !");
return false;
}else{
return true;
}
});
});
function refresh(){
$("#datatable").find("tr:gt(1)").remove();
publishtable();
}
function publishtable(){
for(var c=0;c<data.length;c++){
var trow = $('<tr valign="middle">').addClass("contact");
$("<td>").text(c+1).appendTo(trow);
for(var i=0;i<12;i++){
$("<td>").text(data[c][i]).appendTo(trow);
}
var abutton = $('<input type="button" class="editrow" value="Edit">');
var acell = $("<td>");
abutton.appendTo(acell);
acell.appendTo(trow);
$("#datatable").append(trow);
}
}
//Summation
function sum() {
var txtFirstNumberValue = document.getElementById('B1').value;
var txtSecondNumberValue = document.getElementById('C1').value;
var txtThirdNumberValue = document.getElementById('D1').value;
var result = parseFloat(txtFirstNumberValue) + parseFloat(txtSecondNumberValue) + parseFloat(txtThirdNumberValue);
if (!isNaN(result)) {
document.getElementById('E1').value = result;
}
}
</script>
</head>
<body>
<h2><center>Sample Form</center></h2>
<h5><center>(Rule 23(1) &AMP; Rule 24(1))</center></h5>
<br/><br/>
<table border="0">
<tr>
<td><label for="name">Received from Shri:</label></td>
<td><input type="text" name="name" id="txtbox1" class="txtbox"> </td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<td><input type="text" name="address" id="txtbox2" class="txtbox"> </td>
</tr>
<tr>
<td><label for="address">Email:</label></td>
<td><input type="text" name="email" id="txtbox3" class="txtbox"> </td>
</tr>
<tr>
<td><label for="mobileNo">Mobile No:</label></td>
<td><input type="text" name="mobile" id="txtbox4" class="txtbox"> </td>
</tr>
<tr>
<td> <label for="month">Month:</label></td>
<td><select name="month" id="H1">
<option>Select Month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select></td>
<td><label for="year">Year:</label></td>
<td><select name="year" id="I1">
<option>Select Year</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
</select><td>
</tr>
<tr>
<td><label for="serviceName">Service Name:</label></td>
<td><select name="G1" id="G1">
<option>services</option>
</select></td>
</tr>
<tr>
<td><label for="details">Details:</label></td>
<td><input type="text" name="details" id="J1" class="txtbox" ></td>
</tr>
<tr>
<td><label for="tax">Tax:</label></td>
<td><input type="text" name="tax" id="B1" value="" class="txt" onkeyup="sum();" /></td>
</tr>
<tr>
<td><label for="cess">Cess:</label></td>
<td><input type="text" name="cess" id="C1" value="" class="txt" onkeyup="sum();" /></td>
</tr>
<tr>
<td><label for="penalty">Interest/Penalty:</label></td>
<td><input type="text" name="penalty" id="D1" value="" class="txt" onkeyup="sum();" /></td>
</tr>
<tr>
<td><label for="total">Total:</label></td>
<td><input type="text" name="total" id="E1" value="" class="txtbox" /></td>
</tr>
<td>
<input type="button" name="mybutton" class="addbutton" id="addbutton" value="Add">
</td>
</tr>
</table>
<br/>
<br/>
<br/><br/><br/>
<table id="datatable" class="contacts" border="1">
<thead>
<tr>
<td class="contactDept" colspan="13">Generated rows</td>
</tr>
</thead>
<tbody>
<tr class="contact_head">
<td>S.No.</td>
<td>Name</td>
<td>Address</td>
<td>Email</td>
<td>Mobile</td>
<td>Month</td>
<td>Year</td>
<td>Service</td>
<td>Details</td>
<td>Tax</td>
<td>Cess</td>
<td>Penalty</td>
<td>Total</td>
<!--<td><a href="#" >Edit</a></td>-->
</tr>
</tbody>
</table>
<br/>
<form id="myform" action="save/saveTable.action" method="post">
<input type="hidden" id="data" name="data">
<input type="submit" name="submitbutton" class="submitbutton" id="submitbutton" value="Submit Form">
</form>
Here when click on add, form values are displaying on the table. When click on submit button, I am passing the table(dynamically generated table) to some action class. Before submitting the table I have to perform edit operation. I have written a code for edit function but unable to edit. Please help me to solve..

You made a mistake in your var declaration.
For exemple, you have written mon = $tds.eq(1).text().trim();
It should be mon = $tds.eq(5).text().trim();
Because $tds.eq(1) is the name, not the month.
That's why
$('#H1 option').each(function () {
if ($(this).text().trim() == mon) {
$(this).prop('selected', true);
return false;
}
});
never appends.
Please see this working demo
UpDate 1 :
$('#datatable').on('click', 'td:last-child', function (e) {
var $tr = $(this).parent(),
$tds = $tr.children(),
name = $tds.eq(1).text().trim(),
adress = $tds.eq(2).text().trim(),
email = $tds.eq(3).text().trim(),
mobile = $tds.eq(4).text().trim(),
mon = $tds.eq(5).text().trim(),
year = $tds.eq(6).text().trim(),
service = $tds.eq(7).text().trim(),
details = $tds.eq(8).text().trim(),
tax = $tds.eq(9).text().trim(),
cess = $tds.eq(10).text().trim(),
penalty = $tds.eq(11).text().trim(),
sum = $tds.eq(12).text().trim();
...

How can I make a button in Javascript that clears two textareas?

This is my code so far:
function addtext() {
var newtext = document.myform.inputtext.value;
document.myform.outputtext.value += newtext;
}
<form name="myform">
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td><textarea name="inputtext"></textarea></td>
<td>
<p>
<br />
<input onclick="addtext();" type="button" value="Strip HTML Formatting" />
</p>
</td>
<td><textarea readonly name="outputtext"></textarea></td>
</tr>
</tbody>
</table>
</form>
Now I want to add a button that clears the two textareas.
Where should I be putting the JavaScript for that, and what should it say?

You can use the reset type attribute:
<input type="reset" value="Reset" />
Code snippet:
function addtext() {
var newtext = document.myform.inputtext.value;
document.myform.outputtext.value += newtext;
}
<form name="myform">
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tr>
<td><textarea name="inputtext"></textarea></td>
<td>
<input onclick="addtext()" type="button" value="Strip HTML Formatting" /><br />
<input type="reset" value="Reset" />
</td>
<td><textarea readonly name="outputtext"></textarea></td>
</tr>
</table>
</form>
This resets all form values to their default values.
If you have other textareas besides these and you only want to empty these two, you should create another button that links to a function that empties the values:
HTML:
<input onclick="emptyText()" type="button" value="Clear fields" />
JS:
function emptyText() {
document.myform.inputtext.value = "";
document.myform.outputtext.value = "";
}

Demo on Fiddle
HTML:
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td>
<textarea name="inputtext"></textarea>
</td>
<td>
<p>
<br />
<input type="button" value="Strip HTML Formatting" />
</p>
</td>
<td>
<textarea name="inputtext" readonly></textarea>
</td>
</tr>
<tr>
<td>
<button>Empty</button>
</td>
</tr>
</tbody>
</table>
JavaScript:
var removeBtn = document.getElementsByTagName('button')[0];
var copyBtn = document.querySelector('input[type="button"]');
copyBtn.onclick = function () {
var inpt = document.getElementsByTagName('textarea')[0].value;
document.getElementsByTagName('textarea')[1].value = inpt;
}
removeBtn.onclick = function () {
document.getElementsByTagName('textarea')[0].value = "";
document.getElementsByTagName('textarea')[1].value = "";
}

OPTION 1:
Use a reset type input-button:
function addtext() {
var newtext = document.myform.inputtext.value;
document.myform.outputtext.value += newtext;
}
<form name="myform">
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tr>
<td><textarea name="inputtext"></textarea></td>
<td>
<input onclick="addtext()" type="button" value="Strip HTML Formatting" /><br />
<input type="reset" value="Clear fields" /> <!--THIS LINE-->
</td>
<td><textarea readonly name="outputtext"></textarea></td>
</tr>
</table>
</form>
This resets all form values to their default values.
OPTION 2:
If you have other textareas besides these and you only want to empty these two, you should create another button that links to a function that empties the values:
function addtext() {
var newtext = document.myform.inputtext.value;
document.myform.outputtext.value += newtext;
}
function clearFields() {
document.myform.inputtext.value = "";
document.myform.outputtext.value = "";
}
<form name="myform">
<table align="center" border="0" cellpadding="5" cellspacing="0">
<tr>
<td><textarea name="inputtext"></textarea></td>
<td>
<input onclick="addtext()" type="button" value="Strip HTML Formatting" /><br />
<input onclick="clearFields()" type="button" value="Clear fields" /> <!--THIS LINE-->
</td>
<td><textarea readonly name="outputtext"></textarea></td>
</tr>
</table>
</form>
This literally sets the values of the two textareas to 'empty'.

Currency Converter Not Converting

The Currency converter up top works, but the table based one is a dead duck.
I need a value to be entered at Enter Amount of US Dollars and to be displayed in the corresponding value fields.
Here's the code:
<html>
<head>
<title>Convert US Dollars to Euros 2</title>
</head>
<body>
<form>
<table border="1">
<tbody>
<tr>
<th colspan="3">Monetary Exchange Rates
</th>
</tr>
<tr>
<th>Currency
</th>
<th>Rate
</th>
<th>Value
</th>
</tr>
<tr>
<td>British Pound
</td>
<td><input type="text" style="text-align: right;"
name="bp" value="0.62905" size="12" disabled="true" />
</td>
<td><input type="text" id="BP" value=""></td>
</tr>
<tr>
<td>Canadian Dollar
</td>
<td><input type="text" style="text-align: right;"
name="cd" value="0.98928" size="12" disabled="true" />
</td>
<td><input type="text" id="CD" value=""></td>
</tr>
<tr>
<td>Euro
</td>
<td><input type="text" style="text-align: right;"
name="eu" value="0.79759" size="12" disabled="true" />
</td>
<td><input type="text" id="EU" value=""></td>
</tr>
<tr>
<td>Japanese Yen
</td>
<td><input type="text" style="text-align: right;"
name="jy" value="78.5461" size="12" disabled="true" />
</td>
<td><input type="text" id="JY" value=""></td>
</tr>
<tr>
<td>Mexican Peso
</td>
<td><input type="text" style="text-align: right;"
name="mp" value="13.0729" size="12" disabled="true" />
</td>
<td><input type="text" id="MP" value=""> <!--
td-->
</td>
</tr>
<tr>
<td colspan="2"><b>Enter Amount of U.S. Dollars</b>
</td>
<td>
<input type="text" id="amount" name="amount" size="10" value="1" />
</td>
</tr></tbody>
</table> <br />
<input type="button" value="Calculate" onclick="calculate();">
<input type="reset" value="Reset" />
</form>
<script type="text/javascript">
var BP = '0.62905';
var CD = '0.98928';
var EU = '0.79759';
var JY = '78.5431';
var MP = '13.0729';
function calculate() {
var amount = parseFloat(document.getElementById("amount").value);
// var e = document.getElementById("select");
var select = e.options[e.selectedIndex].value;
var select = document.getElementById("select");
var result = document.getElementById("result");
if(select.options[select.selectedIndex].value=="BP")
if (select.value === "USD to EUR") {
result.value = (amount * 0.7003).toFixed(2);
}
if (select.value === "EUR to USD") {
result.value = (amount * 1.4283).toFixed(2);
}
if (select.value === "0.62905") {
result.value = (amount * 0.62905).toFixed(2);
}
}
</script>
</body>
</html>
Any help would be greatly appreciated.

ID's should be unique, you cannot use same ID multiple times, and your select value does not work, change:
var select = document.getElementById("select");
to
var e = document.getElementById("select");
var select = e.options[e.selectedIndex].value;

Having dropped the select, the script you're looking for is:
<script type="text/javascript">
var BP = '0.62905';
var CD = '0.98928';
var EU = '0.79759';
var JY = '78.5431';
var MP = '13.0729';
function calculate() {
var amount = parseFloat(document.getElementById("amount").value);
document.getElementById("BP").value = (amount * BP).toFixed(2);
document.getElementById("CD").value = (amount * CD).toFixed(2);
document.getElementById("EU").value = (amount * EU).toFixed(2);
document.getElementById("JY").value = (amount * JY).toFixed(2);
document.getElementById("MP").value = (amount * MP).toFixed(2);
}
</script>
We wouldn't want to list those out explicitly like that for anything large-scale; we'd build a list and iterate through it. But I think writing it out this way answers your immediate question better without muddying the waters for you.

Try this code
if(select.options[select.selectedIndex].value=="your value")