I need help to clear my doubts. I made a WebApp table where users just fill-in his data and once he presses the save button, the data will automatically move to Google Sheets. However, it doesn't happen. Can someone please help me with this issue.
So far, I have tried using the .getElementById method by naming individual input boxes with separate IDs.
I've also tried using .getElementById(with table ID) and rows and columns method.
Example: let label=document.getElementById("Master").rows[0].columns[1].value;
Attached sheet where all coding is there.
<style>
th {
font-size : 13px;
border : 1px solid black;
border-radius: 5px;
}
table {
margin-top : 20px;
margin-left : 130px;
font-size : 15px;
text-align : center;
border-spacing : 15px;
border : 1px solid black;
}
td {
border : 1px solid black;
border-radius: 5px;
}
input {
width : 56px;
border : none;
text-align : center;
}
button {
width : 60px;
}
.heading {
margin-top:50px;
margin-top:20px;
text-align:center
}
</style>
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div class="heading">
<h2>KTRP FOLLOW UP AND MANAGEMENT SHEET</h2>
</div>
<table id="Master">
<tr>
<th><b>Working Hours</b></th>
<th><label type="text">07AM to 08AM</label></th>
</tr>
<tr>
<td style="background-color:#B978F0">
<label><b>Reference</b></label text-align="left">
</td>
<td style="border:1px white">
<select id="mod">
<option>V853132</option>
<option>AB35469</option>
<option>AB35511</option>
<option>VC61764</option>
<option>VC78159</option>
<option>AB32871</option>
<option>VC78183</option>
</select>
</td>
</tr>
<tr>
<tr>
<td style="background-color:#00FF00"><label><b>Good Parts Qty</b></label></td>
<td><input type="number" id="gqty"></td>
</tr>
<tr>
<td style="background-color:#FC0808"><label><b>Bad Parts Qty</b></label></td>
<td><input type="number" id="bqty"></td>
</tr>
<tr>
<tr>
<td style="background-color:#FFFF00"><label><b>Preventive Maintenance</b></label></td>
<td><input type="number" id="pmaint"></td>
</tr>
<tr>
<tr>
<td style="background-color:#FFFF00"><label><b>Planned Stoppage</b></label></td>
<td><input type="number" id="trial0"></td>
</tr>
<tr>
<td style="background-color:#93C47D"><label><b>Changeover</b></label></td>
<td><input type="number" id="co"></td>
</tr>
<tr>
<td style="background-color:#93C47D"><label><b>Legal Breaks</b></label></td>
<td><input type="number" id="break"></td>
</tr>
<tr>
<td style="background-color:#E83C3C"><label><b>Non quality stops</b></label></td>
<td><input type="number" id="nqstop"></td>
</tr>
<tr>
<td style="background-color:#76A5AF"><label><b>Breakdowns</b></label></td>
<td><input type="number" id="bds"></td>
</tr>
<tr>
<td style="background-color:#76A5AF"><label><b>Micro Stoppages</b></label></td>
<td><input type="number" id="msds"></td>
</tr>
<tr>
<td style="background-color:#A38BE9"><label><b>Organisation Malfunctions</b></label></td>
<td><input type="number" id="org"></td>
</tr>
<tr>
<td><label><b>Direct Labour</b></label></td>
<td><input type="number" id="dl"></td>
</tr>
<tr>
<td style="border:1px white"> </td>
<td style="border:1px white"><button id="btn">Save</button></td>
</tr>
</table>
<script>
document.getElementById("btn").addEventListener("click",doSave);
function doSave() {
let prodDetails = {
label=document.getElementById("Master").rows[0].columns[1].value;
model=document.getElementById("Master").rows[1].columns[1].value;
goodpartsqty=document.getElementById("Master").rows[2].columns[1].value;
badpartsqty=document.getElementById("Master").rows[3].columns[1].value;
preventivemaint=document.getElementById("Master").rows[4].columns[1].value;
plannedstop=document.getElementById("Master").rows[5].columns[1].value;
changeover=document.getElementById("Master").rows[6].columns[1].value;
legalbreak=document.getElementById("Master").rows[7].columns[1].value;
nonquality=document.getElementById("Master").rows[8].columns[1].value;
breakdown=document.getElementById("Master").rows[9].columns[1].value;
microstoppage=document.getElementById("Master").rows[10].columns[1].value;
organisation=document.getElementById("Master").rows[11].columns[1].value;
directlabour=document.getElementById("Master").rows[12].columns[1].value;
}
google.script.run.dataSave(prodDetails);
}
</script>
</body>
</html>
There are several problems with the prodDetails Object declaration.
Instead of = should be used : or you should declare first it as an empty object, then assign a value to each of the properties.
There isn't a columns property for HTMLTableCellElement. Use cells instead.
The value of the select and input elements inside a table can't be retrieved directly from the HTMLTableCellElement. Instead, you must first get the select or input element and then retrieve the value.
To retrieve the column header, from
document.getElementById("Master").rows[0].columns[1].value;
to
document.getElementById("Master").rows[0].cells[1].innerText;
To retrieve a select value, from
document.getElementById("Master").rows[1].columns[1].value
to
document.getElementById("Master").rows[1].cells[1].children[0].value