title: Using HTML file to Query a Google Spreadsheet using a Textbox for Query, using App Script
body: <p>I have a spreadsheet which I have more than 1000 lines, each column is a field, one of the columns has the field called Domain, "which will be the value I need to query", my application using HTML will need to query using a Text box the HTML to a function, to search the Spreadsheet and return the values of the same line in the HTML. </p>
  
  <p>Now here is the HTML Code:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css"&gt;
      &lt;link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.blue-green.min.css" /&gt; 
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"&gt;&lt;/script&gt;
  
      &lt;?!= include('WebPage.js'); ?&gt;
      &lt;?!= include('Style'); ?&gt;
    &lt;/head&gt;
    &lt;body ng-app="webApp"&gt;
      &lt;div ng-controller="webAppCtrl"&gt;
        &lt;div&gt;
          &lt;md-toolbar class="md-theme-light"&gt;
            &lt;div class="md-toolbar-tools"&gt;
              &lt;div&gt;DeLight App&lt;/div&gt;
            &lt;/div&gt;
          &lt;/md-toolbar&gt;
      &lt;div id="body"&gt;
      &lt;div layout="row" layout-align="center start" layout-margin layout-fill layout-padding&gt;
        &lt;div&gt;
          &lt;form action="#"&gt;
            &lt;div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"&gt;
              &lt;input class="mdl-textfield__input" type="text" id="sample3" /&gt;
              &lt;label class="mdl-textfield__label" for="sample3"&gt;Enter Domain&lt;/label&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
     &lt;div layout="row" layout-align="center start" layout-margin layout-fill layout-padding&gt;
       &lt;div id="leftContainer" class="md-whiteframe-z2" flex="50"&gt;
         &lt;md-toolbar class="md-theme-light"&gt;
           &lt;div class="md-toolbar-tools"&gt;
             &lt;div&gt;Customer Info&lt;/div&gt;
           &lt;/div&gt;
         &lt;/md-toolbar&gt;
         Pull Customer Info here from Sheet
       &lt;/div&gt;
       &lt;div id= "rightContainer" class="md-whiteframe-z2" flex="50"&gt;
         &lt;md-toolbar class="md-theme-light"&gt;
           &lt;div class="md-toolbar-tools"&gt;
             &lt;div&gt;Task List&lt;/div&gt;
           &lt;/div&gt;
         &lt;/md-toolbar&gt;
         &lt;md-list-item&gt;
           &lt;p&gt;Verified Domain Owner&lt;/p&gt;
           &lt;md-checkbox class="md-secondary"&gt;&lt;/md-checkbox&gt;
         &lt;/md-list-item&gt;
         &lt;md-list-item&gt;
           &lt;p&gt;User Creation&lt;/p&gt;
           &lt;md-checkbox class="md-secondary"&gt;&lt;/md-checkbox&gt;
         &lt;/md-list-item&gt;
         &lt;md-list-item&gt;
           &lt;p&gt;Dual Delivery&lt;/p&gt;
           &lt;md-checkbox class="md-secondary"&gt;&lt;/md-checkbox&gt;
         &lt;/md-list-item&gt;
       &lt;/div&gt;
     &lt;/div&gt;
       &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the Web App Function Scripts page:</p>
  
  <pre><code>function doGet(e) {
    return HtmlService.createTemplateFromFile('Index').evaluate()
        .setSandboxMode(HtmlService.SandboxMode.IFRAME)
        .setTitle('Test')
  }
  
  function include(filename) {
    return HtmlService.createHtmlOutputFromFile(filename)
        .setSandboxMode(HtmlService.SandboxMode.IFRAME)
        .getContent();
  }
  
  function testSheet(){
    var ss = SpreadsheetApp.openById("abc123456");
    Logger.log(ss.getName());
  }
  </code></pre>
  
  <p>The problem that I have is that I don't know how I can store the information that the user submits to the Textbox so I can later search my spreadsheet using a snippet I found here which is:</p>
  
  <pre><code>function test(){
   var sh = SpreadsheetApp.openById("abc123456");
   var data = sh.getDataRange().getValues(); // read all data in the sheet
   for(n=0;n&lt;data.length;++n){ // iterate row by row and examine data in column A
   if(data[n][0].toString().match('searchvariable')=='searchvariable'){ data[n][5] = 'YES'};// if column A contains 'xyz' then set value in index [5] (is column F)
   }
   Logger.log(data)
   sh.getRange(1,1,data.length,data[0].length).setValues(data); // write back to the sheet
   }
  </code></pre>
  
  <p>Any Ideas how can I achieve this?</p>
  
  <p>Thank you</p>