onchange function not executing on form field change-CodePudding

I have a form with only single field (DropDown) and assigned a function to execute on it's change.

But it's not working.

What went wrong

Code.gs file

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate()
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}


/* PROCESS FORM */
function processForm(formObject){  
  var result = "";
  if(formObject.searchtext){//Execute if form passes search text
      result = search(formObject.searchtext);
  }
  return result;
}

//SEARCH FOR MATCHED CONTENTS 
function search(searchtext){
  var spreadsheetId   = '1fVBNWvZkFMOfnlt8r6fevt-ozTPweiR5oXot1GU4g2A'; //** CHANGE !!!
  var dataRage        = 'Data!A2:D';                                    //** CHANGE !!!
  var data = Sheets.Spreadsheets.Values.get(spreadsheetId, dataRage).values;

  var ar = [];
  
  data.forEach(function(f) {
    if (~f.indexOf(searchtext)) {
      ar.push(f);
    }
  });
  return ar;
}

Index.html file

<!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN 8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
        


<!--##JAVASCRIPT FUNCTIONS ---------------------------------------------------- -->
<script>
//PREVENT FORMS FROM SUBMITTING / PREVENT DEFAULT BEHAVIOUR
    function preventFormSubmit() {
        var forms = document.querySelectorAll('form');
        for (var i = 0; i < forms.length; i  ) {
          forms[i].addEventListener('submit', function(event) {
              event.preventDefault();
              });
       }
    }
          window.addEventListener("load", preventFormSubmit, true); 
             
          
          //HANDLE FORM SUBMISSION
          function handleFormSubmit(formObject) {
            google.script.run.withSuccessHandler(createTable).processForm(formObject);
            document.getElementById("search-form").reset();
          }
        
          //CREATE THE DATA TABLE
          function createTable(dataArray) {
            if(dataArray && dataArray !== undefined && dataArray.length != 0){
              var result = "<table class='table table-sm' id='dtable' style='font-size:0.8em'>" 
                           "<thead>" 
                             "<tr>"                      //Change table headings to match witht he Google Sheet
                              "<th scope='col'>Model</th>" 
                              "<th scope='col'>Price</th>" 
                              "<th scope='col'>Warranty</th>" 
                              
                           
                            "</tr>" 
                          "</thead>";
              for(var i=0; i<dataArray.length; i  ) {
                  result  = "<tr>";
                  for(var j=0; j<dataArray[i].length; j  ){
                      result  = "<td>" dataArray[i][j] "</td>";
                  }
                  result  = "</tr>";
              }
              result  = "</table>";
              var div = document.getElementById('search-results');
              div.innerHTML = result;
            }else{
              var div = document.getElementById('search-results');
              //div.empty()
              div.innerHTML = "Data not found!";
            }
          }
        </script>
        <!--##JAVASCRIPT FUNCTIONS ~ END ---------------------------------------------------- -->
        
    </head>

<style>
    body{
    margin:0;
    padding-top: 10px;
    font-family: sans-serif;
  }

 *{
    box-sizing: border-box;
  }

 .table{
    width: 100%;
    border-collapse: collapse;
  }

 .table td,.table th{
  padding:12px 15px;
  border:1px solid #ddd;
  text-align: center;
  font-size:16px;
  }

  .table th{
    background-color: darkblue;
    color:#ffffff;
  }

  .table tbody td:nth-child(even){
    background-color: #f5f5f5;
  }

  table td:nth-child(1){ display:none;} 

  /*responsive*/

  @media(max-width: 500px){

     .table tr{
        margin-bottom:15px;
     }

     .table td::before{
        left:0;
        font-size:15px;
        font-weight: bold;
        text-align: left;
     }
    
  }

</style>


<body>
        <div >
      
                  <!-------------------------- SEARCH FORM ----------------------------------------->
                  <form id="search-form" style="margin: 0 auto; width:  50%" >
                    
                    <div  >
                      <select type="text"  id="searchtext" onchange="handleFormSubmit(this)" name="searchtext" placeholder="Search Text">
                        <option> Select </option>
                        <option> FLO </option>
                        <option> TUBULAR </option>
                      </select>
                    </div>

                    <button type="submit" >Search</button>
                  </form>
                  <!-- ## SEARCH FORM ~ END -------------------------------------------->

              <!-- ## TABLE OF SEARCH RESULTS ------------------------------------------>
                <div id="search-results"   >
                  <!-- The Data Table is inserted here by JavaScript -->
                </div>
              <!-- ## TABLE OF SEARCH RESULTS ~ END ------------------------------------>
                
        </div>
</body>
</html>

CodePudding user response：

Modification points:

In your script, I'm worried that formObject might not be able to be parsed with google.script.run.
You might want to run document.getElementById("search-form").reset() after processForm was finished.

When these points are reflected in your showing script, how about the following modification?

From:

function handleFormSubmit(formObject) {
  google.script.run.withSuccessHandler(createTable).processForm(formObject);
  document.getElementById("search-form").reset();
}

To:

function handleFormSubmit(formObject) {
  google.script.run.withSuccessHandler(e => {
    createTable(e);
    document.getElementById("search-form").reset();
  }).processForm({searchtext: formObject.value});
}

Note:

When you modified the Google Apps Script, please modify the deployment as a new version. By this, the modified script is reflected in Web Apps. Please be careful about this.
You can see the detail of this in the report "Redeploying Web Apps without Changing URL of Web Apps for new IDE".