Capturing input from a text input field in Google Aps script

Question

I have a spreadsheet at work that contains information on various different devices we use.

The spreadsheet contains information like the Original Equipment Manufacturer, Storage capacity, format, Etc. There are a total of 10 Columns, and up to 359 rows currently; but the spreadsheet will expand from general use.

I have created a sidebar application in google sheets using Aps script and HTML, in order to make requesting support for these objects simpler. I am running in to an issue with capturing the data typed into an input field. Here is my HTML:

<!DOCTYPE html>
<html>
  <head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>

  <body>
  <div class = "Container"><!-- Begin CONTAINER div -->
    <div class="row"><!-- Begin ROW div -->
      <div class="col s24 "><!-- Beginning of Header div -->
        <h5 class="col s24"offset-s3> Edit a Kit </h5> 
        <div><!-- Text input field for Kit search -->
          <div class="input-field col s12">
            <textarea id="textarea1" class="materialize-textarea"></textarea>
            <label for="textarea1">Enter Kit Name</label>
          </div>
        </div><!-- end of Text Input for Kit search --> 

        <!-- Start of Submit btn div -->
          <div class="input-field col s12">
            <button class="btn waves-effect waves-light" id="search" onclick ="submitData()">Search
              <i class="material-icons right">search</i>
            </button> 
        </div><!-- End of Submit btn div -->

        <div class="divider"></div>

        <div><!-- beginning of kit contents div -->
        <!-- Users need to enter kit names into a text input field, similar to the create kit page -->
         <h5 id = "kit" class = "section"></h5>
        </div><!-- end of kit contents div -->

        <div class="divider"></div>
        <!-- Start of the HOME PAGE button Div -->
        <div class="input-field col s12">
          <button class="btn waves-effect waves-light" onclick="google.script.run.withSuccessHandler(changePage).newPage('Card Request Form')">Home
            <i class="material-icons right">home</i>
          </button>
        </div><!-- end of the HOME PAGE button div -->
      </div><!-- End of Header div --->
    </div><!-- End of ROW Div -->
  </div><!-- End of CONTAINER Div -->


  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <script>
  function changePage(page) {
    document.write(page);
  }

//  function alertA() {
//    alert("Your code Failed to Run");
//  };


  function alertB() {
    alert("Success! Click 'OK' to see your results");
  };


  function submitData() {
    var data = document.getElementById('search').value;
    var outPut = document.getElementById('kit');
    var display = outPut.innerHtml = "THIS IS WORKING AS EXPECTED";
//    alert(display);
  };

  function outputCard(submitData) {

  };

  </script>
  </body>
</html>

I am trying to access the input data from the "Submit btn div" using the function "submitData()", but have been unsuccessful in doing so. In the version i've uploaded, I am simply trying to capture that information, and print it back out to the "kit contents div" but have been unsuccessful.

For clarity, I am doing this in a Google Apps scripts, as a sidebar extension to a google sheets spreadsheet. The goal is to take that input, and parse over the information for all of the informaton referenced in the first Full paragraph; and then return any items relevantr to the users search terms in the "kit contents div". I am not able to capture the input in Google Apps script though. Here is a copy of my gs code:

//This function searches for cards by the value typed into the text input field
function cardSearch(data) {
  var app = SpreadsheetApp;
  var log = app.openById("My Spreadsheet's ID");
  var kitContents = app.openById("My Spreadsheet's ID");
  var cards = log.getRange("A3:J").getValues();
  var kitType = kitContents.getRange("A3:J359").getValues();

for (i=0; i<kitType[data]; i++){
  return kitType[data];
  }

  Logger.log(kitType[356])
  // for some reason, the array literal ends at index #356, where as the spreadsheet is up to 359 rows, but stops at ID#354
};


function alert(data) {
  return "received input " +data.display;
};

//This function loads the webpage content of the HTML file "Card Request Form" as a sidebar in the main spreadsheet
function showRequestForm() {
  var form = HtmlService.createTemplateFromFile("Card Request Form");
  var html = form.evaluate();

  SpreadsheetApp.getUi().showSidebar(html);
};


//This function allows us to navigate pages that exists in the document
function newPage(page) {
  return HtmlService.createHtmlOutputFromFile(page).getContent()
};

I need help understanding how to cpature the input, and pass it back to the GS (I believe it's the same as passing it to the server) in order to run the cardSearch Function with that capturted data.

You'll need to use the google.script.run client side API in your submitData() function. — Alan Wells
– Alan Wells, Commented Dec 17, 2019 at 16:39

halfer · Accepted Answer · 2021-01-09 23:01:07Z

Here's an example form that I've used to collect receipt information. You can display it as a sidebar, a dialog or run it as a webapp. It has a numerical input, a text input and a textarea. It also allows you to upload a file.

thehtml.hmtl:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
      $(function(){
        google.script.run
        .withSuccessHandler(function(rObj){
          $('#dt').val(rObj.date);
        })
        .initForm();
        
      });
      function fileUploadJs(frmData) {
        var amt=$('#amt').val();
        var vndr=$('#vndr').val();
        var img=$('#img').val();
        if(!amt){
          window.alert('No amount provided');
          $('#amt').focus();
          return;
        }
        if(!vndr) {
          window.alert('No vendor provided');
          $('#vndr').focus();
          return;
        }
        if(!img) {
          window.alert('No image chosen');
          $('#img').focus();
        }
        document.getElementById('status').style.display ='inline';
        google.script.run
        .withSuccessHandler(function(hl){
          document.getElementById('status').innerHTML=hl;
        })
        .uploadTheForm(frmData)
      }
      console.log('My Code');
    </script>
    <style>
      input,textarea{margin:5px 5px 5px 0;}
    </style>
  </head>
   <body>
    <h3 id="main-heading">Receipt Information</h3>
    <div id="formDiv">
      <form id="myForm">
        <br /><input type="date" name="date" id="dt"/>
        <br /><input type="number" name="amount" placeholder="Amount" id="amt" />
        <br /><input type="text" name="vendor" placeholder="Vendor" id="vndr"/>
        <br /><textarea name="notes" cols="40" rows="2" placeholder="NOTES"></textarea>
        <br/>Receipt Image
        <br /><input type="file" name="receipt" id="img" />
        <br /><input type="button" value="Submit" onclick="fileUploadJs(this.parentNode)" />
      </form>
    </div>
  <div id="status" style="display: none">
  <!-- div will be filled with innerHTML after form submission. -->
  Uploading. Please wait...
  </div>  
</body>
</html>

Codge.gs:

function onOpen() {
  SpreadsheetApp.getUi().createMenu('Receipt Collection')
    .addItem('Run as Dialog', 'showAsDialog')
    .addItem('Run as Sidebar', 'showAsSidebar')
    .addToUi();
  var sh=SpreadsheetApp.getActive().getSheetByName("Sheet1");
  sh.getRange(sh.getLastRow()+1,1).activate();
}

function uploadTheForm(theForm) {
  var rObj={};
  rObj['vendor']=theForm.vendor;
  rObj['amount']=theForm.amount;
  rObj['date']=theForm.date;
  rObj['notes']=theForm.notes
  var fileBlob=theForm.receipt;
  var fldr = DriveApp.getFolderById(receiptImageFolderId);
  rObj['file']=fldr.createFile(fileBlob);
  rObj['filetype']=fileBlob.getContentType(); 
  Logger.log(JSON.stringify(rObj));
  var cObj=formatFileName(rObj);
  Logger.log(JSON.stringify(cObj));
  var ss=SpreadsheetApp.openById(SSID);
  ss.getSheetByName('Sheet1').appendRow([cObj.date,cObj.vendor,cObj.amount,cObj.notes,cObj.file.getUrl()]);
  var html=Utilities.formatString('<br />FileName: %s',cObj.file.getName());
  return html;
}

function formatFileName(rObj) {
  if(rObj) {
    Logger.log(JSON.stringify(rObj));
    var mA=rObj.date.split('-');
    var name=Utilities.formatString('%s_%s_%s.%s',Utilities.formatDate(new Date(mA[0],mA[1]-1,mA[2]),Session.getScriptTimeZone(),"yyyyMMdd"),rObj.vendor,rObj.amount,rObj.filetype.split('/')[1]);
    rObj.file.setName(name);
  }else{
      throw('Invalid or No File in formatFileName() upload.gs');
  }
  return rObj;
}

function doGet() {
  var output=HtmlService.createHtmlOutputFromFile('receipts').setTitle('thehtml');
  return output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL).addMetaTag('viewport', 'width=360, initial-scale=1');
}

function showAsDialog() {
  var ui=HtmlService.createHtmlOutputFromFile('thehtml');
  SpreadsheetApp.getUi().showModelessDialog(ui, 'Receipts')
}

function showAsSidebar() {
   var ui=HtmlService.createHtmlOutputFromFile('thehtml');
  SpreadsheetApp.getUi().showSidebar(ui);
}

function initForm() {
  var datestring=Utilities.formatDate(new Date(),Session.getScriptTimeZone(), "yyyy-MM-dd")
  return {date:datestring};
}

globals.gs:

var receiptImageFolderId='upload file folder id';
var SSID='spreadsheet id';

Collectives™ on Stack Overflow

Capturing input from a text input field in Google Aps script

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related