CODEWITHSUNDEEP
javascripthtmlgoogle-apps-scriptdom-events
German
German

Reputation: 126

How to call onchange event with parameter from select

I have this code. One dropdown name="street" is populated, then another dropdown is populated according to the value of the prior dropdown.

Now I have to add an radio button and populate the second dropdown according to option checked and first dropdown.

I planed to add onchange event in one radio button, but I don't know how to pass as parameter the value for the first dropdown.

This is not working:

onchange="GetNumber(<script>document.getElementById("street").value<script>)"

segment

   <script>
        function GetNumber(street) 
        {
        
        google.script.run.withSuccessHandler(function(ar) 
        {
    
        console.log(ar);
        
        number.length = 0;
        
        let option = document.createElement("option");
        option.value = "";
        option.text = "";
        number.appendChild(option);
        
        ar.forEach(function(item, index) 
        {    
          let option = document.createElement("option");
          option.value = item[2];
          option.text = item[1];
          number.appendChild(option);    
        });
        
        }).getNumbers(street);

segment

<form method="post" id="form" action="<?= url ?>" >   
        
          <label >Indirizzo</label><br>
          <select name="street" onchange="GetNumber(this.value)" >
          <option value="" ></option>
          <? for(var i = 0; i < streets.length; i++) { ?>      
          <option value="<?= streets[i] ?>" ><?= streets[i] ?></option>
          <? } ?>
          </select><br><br>
          <label class="radio-inline">
              <input type="radio" name="addressType" value="Domestic"   ****magic needed here****>Domestic</label>
              
           <label class="radio-inline">
              <input type="radio" name="addressType" value="Non-Domestic" checked> Non-Domestic</label><br>
          <label >Civico</label><br>
          <select name="number" id="number" onchange="ShowCondominiums(this.value)" >
          </select><br><br>
          <span id="Condominiums" >Condominiums: </span><br>
          <label >Some Data to Store as Sample</label>>
          <input type="text" name="name" /><br>

Upvotes: 0

Views: 620

Answers (1)

Tanaike
Tanaike

Reputation: 201388

I believe your goal as follows.

  • You want to retrieve both the value of 1st dropdown list and the value of radio button.
  • You want to update the values of the 2nd dropdown list by using the retrieved values.

Modification points:

  • When I saw your HTML, I confirmed <input type="radio" name="addressType" value="Non-Domestic" checked>. In this modification, I would like to propose to use this value as the default value.
  • In this modification, when the 1st dropdown list and the radio button are changed, the values of 2nd dropdown list are updated by GetNumber().

When above points are reflected to your script, it becomes as follows.

Modified script:

HTML&Javascript side: index.html

<form method="post" id="form">
<label >Indirizzo</label><br>
<select name="street" id="select1" onchange="GetNumber('Non-Domestic')" >
<option value="" ></option>
<? for(var i = 0; i < streets.length; i++) { ?>
<option value="<?= streets[i] ?>" ><?= streets[i] ?></option>
<? } ?>
</select><br><br>
<label class="radio-inline">
<input type="radio" name="addressType" value="Domestic" onchange="GetNumber(this.value)">Domestic</label>
<label class="radio-inline">
<input type="radio" name="addressType" value="Non-Domestic" onchange="GetNumber(this.value)" checked> Non-Domestic</label><br>
<label >Civico</label><br>
<select name="number" id="number" onchange="ShowCondominiums(this.value)" >
</select><br><br>
<span id="Condominiums" >Condominiums: </span><br>
<label >Some Data to Store as Sample</label>>
<input type="text" name="name" /><br>
</form>

<script>
function GetNumber(addressType){
  var street = document.getElementById("select1").value;
  google.script.run.withSuccessHandler(function(ar){
    console.log(ar);
    number.length = 0;
    let option = document.createElement("option");
    option.value = "";
    option.text = "";
    number.appendChild(option);
    ar.forEach(function(item, index){
      let option = document.createElement("option");
      option.value = item[2];
      option.text = item[1];
      number.appendChild(option);
    });
  }).getNumbers(street, addressType);
}
</script>

Google Apps Script side:

Unfortunately, I cannot find your Google Apps Script side. So in this modification, I propose the sample script for testing above HTML&Javascript.

function openDialog() {
  var html = HtmlService.createTemplateFromFile('index');
  html.streets = ["a", "b", "c"];
  SpreadsheetApp.getUi().showModalDialog(html.evaluate(), "sample");
}

function getNumbers(street, addressType) {
  return [["", street, street], ["", addressType, addressType]];
}
  • When you use this modified script, please run openDialog at the script editor. By this, a dialog is opened on Spreadsheet and you can test the modified script. So, please copy and paste the above scripts to the container-bound script of Spreadsheet.
  • When you open a dialog, and you change the 1st dropdown list is changed, the selected value of 1st dropdown list and the default value (Non-Domestic) of the radio button are sent to getNumbers(street, addressType). By this, the 2nd dropdown list is updated. When you change the radio button, the selected value of 1st dropdown list and the changed value of radio button are sent to getNumbers(street, addressType). By this, the 2nd dropdown list is updated again.

Note:

  • In this modification, I'm not sure about the script of your Google Apps Script side. So please modify your actual script using above modified script.

Upvotes: 1

Related Questions