Sending "this" radio button element parameter to function in Google Apps script

user_13433518 0
Viewed 47

I have a custom sidebar generated via Apps Script on a Google Sheet.

The custom sidebar html contains a form and fieldset with 5 radio input elements, all with onchange events:

google.script.run.viewOptionsFormRadioChange(this);

Here's the full form HTML:

<form id="viewOptionsForm">
      <fieldset class="viewOptionsFieldset">
        <input type="radio" id="all" name="viewOptionsRadio" value="All"  checked="checked" onchange='google.script.run.viewOptionsFormRadioChange(this);' >
        <label for="all">All</label><br>
        <input type="radio" id="firstImport" name="viewOptionsRadio" value="First Import" onchange='google.script.run.viewOptionsFormRadioChange(this);'>
        <label for="firstImport">First Import</label><br>
        <input type="radio" id="secondImport" name="viewOptionsRadio" value="Second Import" onchange='google.script.run.viewOptionsFormRadioChange(this);'>
        <label for="secondImport">Second Import</label><br>
        <input type="radio" id="compositionLinking" name="viewOptionsRadio" value="Composition Linking" onchange='google.script.run.viewOptionsFormRadioChange(this);'>
        <label for="compositionLinking">Composition Linking</label><br>
        <input type="radio" id="underTheHood" name="viewOptionsRadio" value="Under the Hood" onchange='google.script.run.viewOptionsFormRadioChange(this);'>
        <label for="underTheHood">Under the Hood</label>
      </fieldset>
    </form>

I then have a function "viewOptionsFormRadioChange":

function viewOptionsFormRadioChange(checkbox) {

    if(checkbox.checked == true){
      if(checkbox.attr('id') == "underTheHood") {
        SpreadsheetApp.getActive().toast("underTheHood Selected", "Title", 15);
      }
    }
}

I'm trying to get it so the toast notification appears when I select the Under the Hood radio button, however the "this" element parameter doesn't appear to be coming through as parameter variable: checkbox since the above doesn't work.

Any ideas where I'm going wrong?

Thanks either way

google-apps-script html javascript
1 Answers

I think that in your script, how about modifying this to this.value or this.id? It seems that in this case, this cannot be parsed. So, when your script is modified, how about the following modification?

Modified script:

In this modification, your HTML is modified.

<form id="viewOptionsForm">
  <fieldset class="viewOptionsFieldset">
    <input type="radio" id="all" name="viewOptionsRadio" value="All"  checked="checked" onchange='google.script.run.viewOptionsFormRadioChange(this.value);' >
    <label for="all">All</label><br>
    <input type="radio" id="firstImport" name="viewOptionsRadio" value="First Import" onchange='google.script.run.viewOptionsFormRadioChange(this.value);'>
    <label for="firstImport">First Import</label><br>
    <input type="radio" id="secondImport" name="viewOptionsRadio" value="Second Import" onchange='google.script.run.viewOptionsFormRadioChange(this.value);'>
    <label for="secondImport">Second Import</label><br>
    <input type="radio" id="compositionLinking" name="viewOptionsRadio" value="Composition Linking" onchange='google.script.run.viewOptionsFormRadioChange(this.value);'>
    <label for="compositionLinking">Composition Linking</label><br>
    <input type="radio" id="underTheHood" name="viewOptionsRadio" value="Under the Hood" onchange='google.script.run.viewOptionsFormRadioChange(this.value);'>
    <label for="underTheHood">Under the Hood</label>
  </fieldset>
</form>

But, in this case, the returned value is the string value like First Import, Second Import,,,. So, your Google Apps Script might be required to be modified as follows.

function viewOptionsFormRadioChange(checkbox) {
  if(checkbox == "Under the Hood") {
    SpreadsheetApp.getActive().toast("underTheHood Selected", "Title", 15);
  }
}

By this modification, when you check "Under the Hood", toast() is run.

Note:

  • If you want to use the value of id, please moidify this.value to this.id. By this, you can use the value of ID in your HTML tag. It's like if(checkbox == "underTheHood") {,,,} instead of if(checkbox == "Under the Hood") {,,,}.
user_71086530
Related