How do I pass a default value into a <select> field in a Google Sheets sidebar using Apps Script?

Question

I am working on a meeting check-in system using Google Sheets and Apps Script, and it does almost everything I need it to do! I learned how to pass values from a .gs script into the sidebar here: Google Sheets / Apps Script - Pass Values into HTML Template Sidebar, which was super helpful in getting the application functional.

The application grabs member info from a list of nametags and populates it to the sidebar, where it is verified by the person running registration. My problem is that one of the fields on the sidebar is a <select> html form element, and I would like to pass a default value from the member info into it.

With the text entry fields it's fairly straightforward, and value=<?= fName => (for first name, for example) works to set the default of the First Name field to the value of html.fName that I passed into the sidebar. But since the various options are nested inside of the <select></select> tags, this method doesn't work. I have not been able to find a solution to this problem on StackOverflow or elsewhere.

The .gs function is here:

function verifySidebar(memberInfo) {
  //VerifyEvent displays sidebar, populated with data from memberInfo
  //memberInfo consists of: [memberID, firstName, lastName, churchName, memberRole]

  var html = HtmlService.createTemplateFromFile('VerifyEvent');

  html.memberID = memberInfo[0];
  html.fName = memberInfo[1];
  html.lName = memberInfo[2];
  html.cName = memberInfo[3];
  html.memRole = memberInfo[4];

  var rendered = html.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setTitle('Verify Member Info')
    .setWidth(300);

  SpreadsheetApp.getUi().showSidebar(rendered);
}

And here is the HTML for the sidebar:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h2 id="headeralert">Verify Info and Select Role for Member:</h2>
        <h3 id="memberID"><?= memberID ?></h3>
        <form>
                <p>First Name:<br><input type="text" id="fName" autocomplete="off" value=<?= fName ?>></p>
                <p>Last Name:<br><input type="text" id="lName" autocomplete="offoff" value=<?= lName ?>></p>
                <p>Church:<br><input type="text" id="cName" autocomplete="off" value=<?= cName ?>></p>
                <p>Role:<br>
                <select id="role" class="formField" autofocus value=<?= memRole ?>>
                    <option value="REC">RE Commissioner (VOTER)</option>
                    <option value="TEC">TE Commissioner (VOTER)</option>
                    <option value="REMBVOO">RE Mem by Virtue of Office (VOTER)</option>
                    <option value="CRE">Commissioned RE (VOTER)</option>
                    <option value="REA">RE Attendee (NON-VOTER)</option>
                    <option value="COR">Corresponding Mem (NON-VOTER)</option>
                    <option value="VIS">Visitor (NON-VOTER)</option>
                </select></p>
                <p>
                <button name="submitID" onClick="event.preventDefault(); submitForm(); google.script.host.close();">Register</button>
        </form>
        <script>
        function submitForm() {
          var memberID = document.getElementById("memberID").textContent;
          var firstName = document.getElementById("fName").value;
          var lastName = document.getElementById("lName").value;
          var cName = document.getElementById("cName").value;
          var memRole = document.getElementById("role").value;

          var regInfo = [memberID, firstName, lastName, cName, memRole];
          google.script.run.pushToSheet(regInfo);
        }   
    </script>
    </body>
</html>

Amit Agarwal Amit Agarwal · Accepted Answer · 2018-10-24T13:20:56

You can add this script to the bottom of the HTML file that will set the select value after rendering.

<script>
  document.getElementById('role').value = '<?= memRole; ?>'
</script>

How do I pass a default value into a <select> field in a Google Sheets sidebar using Apps Script?

1 Answers