How do I get the value from a html element - html

Question

Hi im trying the get the value from a HTML element ID called "SBNum" and use it as a variable called SBNumber on a google script that then retrieves some data with an API.
Here's what I've got so far and I just can't get the value as a variable not sure what I'm missing.
GS CODE
function doGet(request) {
return HtmlService.createTemplateFromFile('Index').evaluate();
}
/* #Include JavaScript and CSS Files */
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
/* #Process Form */
function processForm(formObject) {
var SBNumber = document.getElementById("SBNum").value;
///////////////////START API///////////////////////////
var USERNAME = 'API PASSCODE';
var PASSWORD = 'x';
var url = 'https://URL/api/2.0/documents.json?documentNumber='+SBNumber+'&compact=false&contextId=5';
var headers = {
"Authorization": "Basic " + Utilities.base64Encode(USERNAME + ':' + PASSWORD)
};
HTML CODE
<div class="form-row">
<div class="form-group col-md-4">
<label for="SBNum">SalesBinder Number</label>
<input type="text" class="form-control" id="SBNum" >
</div>
</div>
JS CODE
<script>
// Prevent forms from submitting.
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
function handleFormSubmit(formObject) {
google.script.run.processForm(formObject);
document.getElementById("myForm").reset();
}
Any help would be greatly appreciated
Thanks

Answer 1

Modification points:
There is no document.getElementById("SBNum") in Google Apps Script.
In your Javascript, handleFormSubmit is not called.
Unfortunately, I cannot know your whole script. So, I would like to propose a modified script by complementing the script.
Modified script:
HTML side:
<form id="myForm">
<div class="form-row">
<div class="form-group col-md-4">
<label for="SBNum">SalesBinder Number</label>
<input type="text" class="form-control" id="SBNum" name="SBNum">
</div>
</div>
<input type="submit" value="submit">
</form>
<script>
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
var value = document.getElementById("myForm");
handleFormSubmit(value);
});
}
// or, I think that you can also use the following script instead of above script.
// document.getElementById("myForm").addEventListener('submit', function(event) {
// event.preventDefault();
// var value = document.getElementById("myForm");
// handleFormSubmit(value);
// });
}
window.addEventListener('load', preventFormSubmit);
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(_ => document.getElementById("myForm").reset()).processForm(formObject);
}
</script>
Google Apps Script side:
In this modification, processForm is modified.
function processForm(formObject) {
var SBNumber = formObject.SBNum.value; // Retrieve values from HTML form.
var USERNAME = 'API PASSCODE';
var PASSWORD = 'x';
var url = 'https://URL/api/2.0/documents.json?documentNumber=' + SBNumber + '&compact=false&contextId=5';
var headers = {
"Authorization": "Basic " + Utilities.base64Encode(USERNAME + ':' + PASSWORD)
};
// do something
}
When this modified HTML is opened and a value is put to the input tag and a submit button is clicked, the value of inputted value is sent to Google Apps Script. And, the value can be retrieved as var SBNumber = formObject.SBNum.value.
Note:
When you modified the Google Apps Script of Web Apps, please modify the deployment as a new version. By this, the modified script is reflected in Web Apps. Please be careful about this.
You can see the detail of this in my report "Redeploying Web Apps without Changing URL of Web Apps for new IDE (Author: me)".
References:
Web Apps
Taking advantage of Web Apps with Google Apps Script (Author: me)