Is there a way to create buttons for each row in a table that, when clicked, send the entire row back to another sheet along with a timestamp? I am currently generating the table from an array but facing issues accessing the elements within it. Both the .getElementbyId() and .getElementbyId().appendChild methods are unable to access the button values. While I am able to save other form elements to my Google Sheet, I struggle with saving entire rows. Could someone suggest a better approach? Additionally, I am not sure how to implement this functionality for multiple buttons...
Javascript
function generateScheduleTable(dataArray){
var tbody = document.getElementById("table-body-schedule");
tbody.innerHTML="";
dataArray.forEach(function(r, i){
var row = document.createElement("tr");
var col1 = document.createElement("td");
col1.textContent = r[0];
var col2 = document.createElement("td");
col2.textContent = r[1];
var col3 = document.createElement("td");
col3.textContent = r[2];
var col4 = document.createElement("td");
col4.textContent = r[3];
var col5 = document.createElement("td");
col5.textContent = r[4];
var col6 = document.createElement("td");
col6.textContent = r[5];
var col7 = document.createElement("button");
col7.className = "btn";
col7.id = "passbtn" +i;
col7.innerHTML = "PASS";
row.appendChild(col1);
row.appendChild(col2);
row.appendChild(col3);
row.appendChild(col4);
row.appendChild(col5);
row.appendChild(col6);
row.appendChild(col7);
tbody.appendChild(row);
col7.value = r;
console.log(col7);
});
document.querySelectorAll('.btn').forEach(item => {
item.addEventListener('click', event => {
handleFormSubmit(passbtn0);
})
});
}
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
document.getElementById('datestamp').value = document.getElementById('ct5').innerHTML;
document.getElementById('student_id').addEventListener("input",getStudentInfo);
document.getElementById('event_id').addEventListener("select",DropDowns);
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
function handleFormSubmit(formObject) {
document.getElementById('datestamp').value = document.getElementById('ct5').innerHTML;
document.getElementById('student_id').select();
document.getElementById('passbtn0').innerHTML;
google.script.run.processForm(formObject);
}
HTML
<form id="myForm" onsubmit="handleFormSubmit(this)">
<h3 class="text">Test App</h3>
<div class = "submissions" id="event_id">
<label for="event_id">Event Type</label>
<select type="text" class="submissions" id="event_id" name="event_id">
<option value = "" disabled selected>Select Event</option>
<? for (var i=0; i<list.length;i++){ ?>
<option><?= list[i]; ?></option>
<? } ?>
</select>
</div>
<div class="form-group">
<label for="room">Scan Location</label>
<input class="submissions" type="text" id="room" name="room" placeholder="Scan Location">
</div>
<div class="form-group">
<label for="student_id">Student ID</label>
<input class="submissions" type="text" id="student_id" name="student_id" placeholder="Student ID" autofocus required>
</div>
<div class="form-group">
<label class ="active" for="student_info">Student Information</label>
<input disabled class="submissions" type="text" class="flow-text" id="student_info" name="student_info" placeholder="Student Information">
<div class="row col s12" id="buttons">
<br>
<h5 class="text">Student Schedule</h5>
<table class="striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Class</th>
<th>Period</th>
<th>Teacher</th>
<th>Room</th>
<th>Issue Pass</th>
<th>Hall Sweep Time</th>
</tr>
</thead>
<tbody id="table-body-schedule">
</tbody>
</table>
</div>
</div>
<div class="form-group">
<input class="form-control form-control-lg" type='hidden' class="form-control" value='12356' name='datestamp' id='datestamp'>
<br>
<span id='ct5' class="flow-text text-warning" type="text" value=""></span>
</div>
</form>
Code.gs
function processForm(formObject){
var sheet = ss.getSheetByName('Log');
sheet.appendRow([formObject.datestamp,
formObject.student_id,
formObject.passbtn0,
formObject.room
//formObject.email
]);
}