function createInnerHTML - how to repeat with other form input? - forms

Question

I have the below code;
.gs
function createInnerHTML() {
var ss = SpreadsheetApp.getActive();
var names = ss.getSheetByName("WELD DATE LOG");
var namesValues = names.getRange(2,13,names.getLastRow()-1).getValues();
var innerHTML = [];
for (var i=0;i<namesValues.length;i++){
innerHTML.push({value:''+ namesValues[i][0], text:namesValues[i][0]});
};
return innerHTML;
}
.html
<? var innerHTML= createInnerHTML(); ?>
<select name="JOINT" id="JOINT" aria-label="JOINT" aria-required="true" required="">
<option value=""></option>
<? innerHTML.forEach(function(option) { ?>
<option value="<?= option.value ?>"><?= option.text ?></option>
<? }); ?>
</select>
The purpose is to update the form options by a column in the spreadsheet where I have some related issues:
First, if the cell is blank, I need to remove the option from the form because it reads a blank option in the list
For example, when a user opens the options list in the form, it gives 4 options with two are blank and two with values instead of displaying the two values only
Second, how can I repeat the same function in the same script but with other form questions whether select or checkbox
For example, I have this html form with two input fields:
<? var innerHTML= createInnerHTML(); ?>
<select name="JOINT" id="JOINT" aria-label="JOINT" aria-required="true" required="">
<option value=""></option>
<? innerHTML.forEach(function(option) { ?>
<option value="<?= option.value ?>"><?= option.text ?></option>
<? }); ?>
</select>
<select name="WS" required>
<option value=""></option>
<option value="WS S01">WS S01</option>
<option value="WS S02">WS S02</option>
<option value="WS S03">WS S03</option>
<option value="WS S04">WS S04</option>
</select>
In the .gs file, I need to repeat the same mentioned function "function createInnerHTML()" with both form inputs
Thanks in advance

Answer 1

if the cell is blank If the cell is blank can be corrected several ways. You could use the filter method on innerHTML or:
function createInnerHTML() {
var ss = SpreadsheetApp.getActive();
var names = ss.getSheetByName("WELD DATE LOG");
var namesValues = names.getRange(2,13,names.getLastRow()-1).getValues();
var innerHTML = [];
for (var i=0;i<namesValues.length;i++){
if(namesValues[i][0]) {
innerHTML.push({value:''+ namesValues[i][0], text:namesValues[i][0]});
}
};
return innerHTML;
}
how can I repeat the same function in the same script but with other form questions whether select or checkbox
You didn't supply any form information or spreadsheet data, so we don't really know the specifics to answer the question intelligently. Please provide additional information and code requirements.
This is how I generally update a select:
gs:
function getSelectOptions() {
sortOptions();
var ss=SpreadsheetApp.openById(getGlobal('gSSID'));
var sh=ss.getSheetByName('Options');
var rg=sh.getDataRange();
var vA=rg.getValues();
var options=[];
for(var i=0;i<vA.length;i++)
{
options.push(vA[i][0]);
}
return vA;
}
function sortOptions() {
var ss=SpreadsheetApp.openById(getGlobal('gSSID'));
var sh=ss.getSheetByName('Options');
var rg=sh.getRange(2,1,sh.getLastRow()-1,1);
rg.sort({column:1,ascending:true});
}
js:
function updateSelect(vA,id){
var id=id || 'sel1';
var select = document.getElementById(id);
select.options.length = 0;
for(var i=0;i<vA.length;i++)
{
select.options[i] = new Option(vA[i],vA[i]);
}
}

Answer 2

Okay I tried the below codes and they worked:
.html
<? var innerHTML= createInnerHTML1(); ?>
<select name="List1" required="">
<option value=""></option>
<? innerHTML.forEach(function(option) { ?>
<option value="<?= option.value ?>"><?= option.text ?></option>
<? }); ?>
</select>
<? var innerHTML= createInnerHTML2(); ?>
<select name="List2" required="">
<option value=""></option>
<? innerHTML.forEach(function(option) { ?>
<option value="<?= option.value ?>"><?= option.text ?></option>
<? }); ?>
</select>
.gs
function createInnerHTML1() {
var ss = SpreadsheetApp.getActive();
var names = ss.getSheetByName("sheet name");
var namesValues = names.getRange(2,14,names.getLastRow()-1).getValues();
var innerHTML = [];
for (var i=0;i<namesValues.length;i++){
if(namesValues[i][0]) {
innerHTML.push({value:''+ namesValues[i][0], text:namesValues[i][0]});
}
};
return innerHTML;
}
function createInnerHTML2() {
var ss = SpreadsheetApp.getActive();
var names = ss.getSheetByName("sheet name");
var namesValues = names.getRange(2,11,names.getLastRow()-1).getValues();
var innerHTML = [];
for (var i=0;i<namesValues.length;i++){
if(namesValues[i][0]) {
innerHTML.push({value:''+ namesValues[i][0], text:namesValues[i][0]});
}
};
return innerHTML;
}
And so on you can repeat the same function in the .gs file with many inputs in the .html file. Thanks again Cooper