Pass parameters on URL Google apps Script and updates fields

Question

I have a HTML form with apps script and Bootstrap 4. In that form I have an input field and its value it's come from parameters on the URL. When I pass the parameter to the field I have to update a second field. But when I send the url with the parameters, the second field doesn't update.

This is my code:

<div class="form-row">
<div class="form-group col-md-6">
<label for="inputid">Identificador de viaje</label>
<input type="text" class="form-control" id="inputid" required>
  <div class="invalid-feedback">
    No ha ingresado los datos o el viaje señalado ya se encuentra cerrado.
  </div>
  </div>
  <div class="form-group col-md-6">
  <label for="estado">Estado</label>
  <input type="text" class="form-control" id="estado" required disabled>
  <div class="invalid-feedback">
    No ha ingresado los datos o estos no son válidos.
  </div>
  </div> 
  </div>
  <script>
  var arrayOfValues;

  function afterButtonClicked(){

  if(validate()){

  var cuenta = document.getElementById("cuenta");   
  var inputid = document.getElementById("inputid");
  var estado = document.getElementById("estado");
  var kmfinal = document.getElementById("kmfinal");
        
  var rowDataarrive = {cuenta: cuenta.value,inputid:inputid.value,
               estado: estado.value,kmfinal:kmfinal.value,                              
               };
               
  google.script.run.addNewRowarrive(rowDataarrive);
  $('#modal').modal('hide')
  $('#successnotification').toast('show')
  setTimeout(function(){location.reload()}, 6000);
  } else{
  $('#modal').modal('hide')
  $('#errornotification').toast('show')
  }
  }

  function validate(){
   var fieldsToValidate = document.querySelectorAll("#userform input, #userform select");
   Array.prototype.forEach.call(fieldsToValidate, function(el){
  if(el.checkValidity()){
  el.classList.remove("is-invalid");

  }else{
  el.classList.add("is-invalid");

  }
   
   });

   return Array.prototype.every.call(fieldsToValidate, function(el){
   return el.checkValidity();

   });


   }
   function getId(){

   var idCode = document.getElementById("inputid").value;

    google.script.run.withSuccessHandler(updateIdcode).getId(idCode);

    }

    function updateIdcode(estadolist){
    document.getElementById("estado").value = estadolist;

     }
 
     google.script.url.getLocation(function(location) {
     document.getElementById("inputid").value = location.parameters.inputid[0];
     });
     
    document.getElementById("inputid").addEventListener("input",getId);
    document.getElementById("enviar").addEventListener("click",afterButtonClicked);
    document.getElementById("loading").remove();
    </script>

Then when I send the url with the parameters on my navigator, the input field "estado" doesn't update.

What is my problem?

Answer 1

I believe your goal as follows.

• You want to modify the text box of estado by accessing to URL including the query parameters like https://script.google.com/macros/s/###/exec?inputid=###.

Modification point:

• In this case, how about modifying google.script.url.getLocation?

Modified script:

google.script.url.getLocation(function(location) {
  document.getElementById("inputid").value = location.parameters.inputid[0];
  getId();  // Added
});

• By this, when you accessed to the Web Apps with https://script.google.com/macros/s/###/exec?inputid=###, the value of the text box of estado is modified by executing the function of getId().

Reference:

• getLocation(function)