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

javascript: Auto calculate price upon entering quantity in input box

In my program I am trying to auto calculate total price when user enter quantity in input box. For that I performed below script. but due to some error my script doesn't working as per expectation and when I enter quantity, total price doesn't get updated. Can anyone tell me what's wrong in my code. I want to perform this script without jquery.
code:
<!DOCTYPE html>
<html>
<head>
<title>form</title>
</head>
<body>
<form action="" method="POST" name="myForm" id="myForm">
<table bgcolor="pink" align="center" border="2px">
<tbody>
<tr>
<th> Category </th>
<th> Description </th>
<th> Unit Price </th>
<th> Quantity </th>
<th> Total Price</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td> Paneer </td>
<td name="priceQ1"> $10 </td>
<td> <input type="text" size="4" id="q1" name="qty1" onkeyup="calculate()"> </td>
<td> <input type="text" id="total1" name="total1"> </td>
</tr>
<tr>
<td> Rice </td>
<td name="priceQ2"> $30 </td>
<td> <input type="text" size="4" id="q2" name="qty2" onkeyup="calculate()"> </td>
<td> <input type="text" id="total2" name="total2"> </td>
</tr>
<tr align="right">
<td colspan="4"> Subtotal $ </td>
<td> <input type="text" id="sub_total" name="sub_total"> </td>
</tr>
<tr>
<td rowspan="2">2</td>
<td> Chicken Palak </td>
<td name="priceQ3"> $20 </td>
<td> <input type="text" size="4" id="q3" name="qty3" onkeyup="calculate()"> </td>
<td> <input type="text" id="total3" name="total3"> </td>
</tr>
<tr>
<td> Aloo Tikki </td>
<td name="priceQ4 "> $14 </td>
<td> <input type="text" size="4" id="q4" name="qty4" onkeyup="calculate()"> </td>
<td> <input type="text" id="total4" name="total4"> </td>
</tr>
<tr align="right">
<td colspan="4"> Subtotal $ </td>
<td> <input type="text" id="sub_total2" name="sub_total2"> </td>
</tr>
</tbody>
</table>
<p align="center">
<input type="submit" value="Submit">
<input type="reset">
</p>
</form>
<script>
function calculate() {
var f = document.forms['myForm'];
for(var i=0;i<4;i++){
var qty = document.getElementByName('qty'+i);
document.getElementById('total'+i).value = newValue;
}
}
</script>
</body>
</html>

There is no document.getElementsById, you should name your different quantities and total price fields with distinct names and traverse thru them using document.getElementById('qty'+i);

input boxes value of table should not be greater then input box outside of table

Hello I have developed a form where input boxes value of table should not be greater then input box outside of table.
<form>
<div class="form-group">
<label class="label1 col-md-4">Total number of sanctioned seats
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="sanctionedSeatsSummary">
</div>
</div>
<table class="eduleveles table table-bordered table-hover">
<thead>
<th></th>
<th>Faculty</th>
<th>Enter sanctioned seats</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
</tbody>
</table>
</form>
in above jsfiddle all ENTER SANCTIONED SEATS sum will not be greater then "Enter total number of sanctioned seats" in onchange.

You need to use jquery keyup event as I mentioned in fiddle.
Please check this fiddle
Here I just made textbox value blank if sum of three sanctioned seats are greater than total.
Also i have cleare 3 textbox if you chane total textbox
Open this link : https://jsfiddle.net/5y6na3wr/7/

$(document).ready(function(){
$(".seats").on('keyup',function(){
var total = parseInt(0) ;
$( ".seats" ).each(function( index ) {
if($(this).val()){
total = total + parseInt($(this).val());
}
});
if(total > $("#sanctionedSeatsSummary").val()){
alert("total sanctioned Seats are greater then given sanctioned Seats");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<div class="form-group">
<label class="label1 col-md-4">Total number of sanctioned seats
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="sanctionedSeatsSummary">
</div>
</div>
<table class="eduleveles table table-bordered table-hover">
<thead>
<th></th>
<th>Faculty</th>
<th>Enter sanctioned seats</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
</tbody>
</table>
</form>

check below snippet
$(document).ready(function(){
var ttl, val;
$("input[name=seats]").on('keyup', function(){
val = 0;
$("input[name=seats]").each(function(){
if(parseInt($(this).val().trim()) > 0)
val += parseInt($(this).val().trim());
});
ttl = parseInt($("#sanctionedSeatsSummary").val().trim());
if(val > ttl)
alert("your alert");
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="form-group">
<label class="label1 col-md-4">Total number of sanctioned seats
<span class="required"> * </span>
</label>
<div class="col-md-7">
<input type="text" class="form-control" id="sanctionedSeatsSummary">
</div>
</div>
<table class="eduleveles table table-bordered table-hover">
<thead>
<th></th>
<th>Faculty</th>
<th>Enter sanctioned seats</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Check" class="cbxenable">
</td>
<td>
</td>
<td>
<input type="text" class="form-control seats" name="seats">
</td>
</tr>
</tbody>
</table>
</form>

Trying to find previous DOM elements and get input value jquery

I am trying to create a table that when a user click update, it will get the first and second input value. I am trying to use prev to find the first two DOM element and get the value, but fail, what should I do? Any help is appreciated.
$('.update_button').on("click",function(){
var update_val_1 = $(this).prev().find('input:first').val();
var update_val_2 = $(this).prev().find('input:nth-child(2)').val();
alert(update_val_1);
alert(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="gridtable">
<td><input type="text" value="apple" /></td>
<td><input type="text" value="one" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
<tr class="gridtable">
<td><input type="text" value="banana" /></td>
<td><input type="text" value="three" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
<tr class="gridtable">
<td><input type="text" value="berry" /></td>
<td><input type="text" value="ten" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>

The problem is that prev looks for sibling nodes. Your input elements are in different td's so they aren't siblings. Instead, you need to go to the parent row then grab the inputs from there.
Explicit example:
$('.update_button').on("click", function() {
var $parentRow = $(this).closest('.gridtable');
var $firstCell = $parentRow.find('td:first-child');
var $secondCell = $parentRow.find('td:nth-child(2)');
var $firstInput = $firstCell.find('input');
var $secondInput = $secondCell.find('input');
var update_val_1 = $firstInput.val();
var update_val_2 = $secondInput.val();
console.log(update_val_1);
console.log(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="gridtable">
<td>
<input type="text" value="apple" />
</td>
<td>
<input type="text" value="one" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="banana" />
</td>
<td>
<input type="text" value="three" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="berry" />
</td>
<td>
<input type="text" value="ten" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
</table>
Simplified example:
$('.update_button').on("click", function() {
var $parentRow = $(this).closest('.gridtable');
var update_val_1 = $parentRow.find('td:first-child input').val();
var update_val_2 = $parentRow.find('td:nth-child(2) input').val();
console.log(update_val_1);
console.log(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="gridtable">
<td>
<input type="text" value="apple" />
</td>
<td>
<input type="text" value="one" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="banana" />
</td>
<td>
<input type="text" value="three" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="berry" />
</td>
<td>
<input type="text" value="ten" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
</table>

I'm a big fan of the .closest(selector) and .find('selector') methods.
The first one goes up the dom until it finds the first match of the given selector.
The second one goes down the dom and finds all matches.
.eq(index) is like array[index] for jQuery. It takes a collection of jQuery elements and returns the one at the given index.
$('.update_button').on("click",function(){
var inputs = $(this).closest('.gridtable').find('input');
var value1 = inputs.eq(0).val();
var value2 = inputs.eq(1).val();
});

How to Read the Values From Input field inside td Jquery

I have a table and with in tds i had a text box
<table class="table ratemanagement customtabl-bordered " id="rate_table">
<tbody>
<tr>
<th><input type="checkbox" onclick="select_all()" class="check_all"></th>
<th>From Days*</th>
<th>To Days*</th>
<th>Rent*</th>
</tr>
<tr>
<td>
<input class="case" type="checkbox">
</td>
<td class="v">
<input id="rate_fromdays" class="form-control" name="fromdays" type="text">
</td>
<td>
<input id="rate_todays" class="form-control" name="todays" type="text">
</td>
<td>
<input id="rate_rent" class="form-control" name="rent" type="text">
</td>
</tr>
<tr>
<td>
<input class="case" type="checkbox">
</td>
<td class="v">
<input id="rate_fromdays" class="form-control" name="fromdays" type="text">
</td>
<td>
<input id="rate_todays" class="form-control" name="todays" type="text">
</td>
<td>
<input id="rate_rent" class="form-control" name="rent" type="text">
</td>
</tr>
</tbody>
</table>
i want to read the values from text box i tried
var values = {};
$('.v input').each(function () {
values[$(this).attr('name')] = $(this).val();
});
and
$('input[name="fromdays"],[name="todays"],[name="rent"]').each(function () {
var fromdays = $(this).val();
alert(fromdays);
});
I want to store the values in independent variables how do i do that ex all fromdays to firstvariable, all todays to second variable
how do i do that
Thanks

var values = [];
$('.v input').each(function () {
values.push($(this).attr('name') = $(this).val());
});

You can store the values in three different arrays by checking the name attribute of the input fields
var fromdays=new Array();
var todays=new Array();
var rent=new Array();
$('#rate_table input[type="text"]').each(function () {
if($(this).attr('name')=="fromdays")
fromdays.push($(this).val())
if($(this).attr('name')=="todays")
todays.push($(this).val())
if($(this).attr('name')=="rent")
rent.push($(this).val())
});
JsFiddle

On button click, iterate over the inputs and push their values in to the respective array:
$(document).on('click', '#getVar', function() {
var fromVar = [];
var toVar = [];
$('input[name=fromdays]').each(function() {
fromVar.push($(this).val());
});
$('input[name=todays]').each(function() {
toVar.push($(this).val());
});
alert('from: ' + fromVar + ' - to: ' + toVar);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table ratemanagement customtabl-bordered " id="rate_table">
<tbody>
<tr>
<th><input type="checkbox" onclick="select_all()" class="check_all"></th>
<th>From Days*</th>
<th>To Days*</th>
<th>Rent*</th>
</tr>
<tr>
<td>
<input class="case" type="checkbox">
</td>
<td class="v">
<input id="rate_fromdays" class="form-control" name="fromdays" type="text">
</td>
<td>
<input id="rate_todays" class="form-control" name="todays" type="text">
</td>
<td>
<input id="rate_rent" class="form-control" name="rent" type="text">
</td>
</tr>
<tr>
<td>
<input class="case" type="checkbox">
</td>
<td class="v">
<input id="rate_fromdays" class="form-control" name="fromdays" type="text">
</td>
<td>
<input id="rate_todays" class="form-control" name="todays" type="text">
</td>
<td>
<input id="rate_rent" class="form-control" name="rent" type="text">
</td>
</tr>
</tbody>
</table>
<button id="getVar">get variables</button>