Custom form (Web App) to send value and use it with Google Apps Script

Question

I'm trying to create a custom form in order to send one value (ID) and below of the form see the search result based on the input field.

For example: Complete the form and below see the search result in a DataBase (Google Sheets)

I saw some examples but I don't know how to get the value of the input field and use it with the Google Apps Script code (in order to search the ID in the rows).

Here some code I was trying: code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}


function obtenerId() {
  var email = Session.getActiveUser().getEmail();
  var idtest='Juan';
  return messageSecret_(idtest);
}

function messageSecret_(urldoc) {
  return 'test'+urldoc;
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function onSuccess(balance) {
        var div = document.getElementById('output');
        var idtest = document.getElementById('ingresoid').value;
        div.innerHTML = balance+' '+idtest;
      }

    </script>
  </head>
  <body>
    
    <!--Modificar texto de la aplicación -->
    <p style="margin-bottom: 16px; font-family: 'Verdana regular'; font-size: 16px;color: #727277;line-height: 16px;text-align: justify;">Ingrese ID:
    <br><br></p>
    <input type="textbox" id="ingresoid" size="20">
    <br><br>
    <input type="button" value="Enviar respuesta" onclick="google.script.run.withSuccessHandler(onSuccess)
          .obtenerId();" style="background-color:#C1D72E;border-radius:10px;padding:5px;color: #fff; border-color: #C1D72E;"
      /><br>
      <br>
      
      <div id="output"></div>
  </body>
</html>

You need to use the SpreadsheetApp class, get the spreadsheet by ID, and then get the sheet tab, then get a range, then set the value in the range. Link to Get Sheet by Name And: Link to Get Range And also: Set Value — Alan Wells
– Alan Wells, Commented Jan 14, 2018 at 14:56
Thanks, but how is possible to pass the value of the input field to the Google Apps Script section. That's my main problem since I have the value in html section, but it doesn't exist in GAS section. — user2946433
– user2946433, Commented Jan 14, 2018 at 16:53

mkrieger1 · Accepted Answer · 2021-11-09 13:34:44Z

3

How about the following modification?

From:

<input type="textbox" id="ingresoid" size="20">
<br><br>
<input type="button" value="Enviar respuesta" onclick="google.script.run.withSuccessHandler(onSuccess)
      .obtenerId();" style="background-color:#C1D72E;border-radius:10px;padding:5px;color: #fff; border-color: #C1D72E;"
  /><br>

To:

<form> <!-- Added -->
    <input type="textbox" id="ingresoid" size="20" name="sample"> <!-- Modified -->
    <br><br>
    <input type="button" value="Enviar respuesta" onclick="google.script.run.withSuccessHandler(onSuccess)
          .obtenerId(this.parentNode);" style="background-color:#C1D72E;border-radius:10px;padding:5px;color: #fff; border-color: #C1D72E;"
      /><br>  <!-- Modified -->
</form> <!-- Added -->

After modified, the inputted value can be retrieved at GAS side as follows.

function obtenerId(e) {
  var value = e.sample;
}

edited Nov 9, 2021 at 13:34

mkrieger1

24.2k7 gold badges68 silver badges84 bronze badges

answered Jan 14, 2018 at 23:05

Tanaike

203k12 gold badges126 silver badges222 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2946433 Over a year ago

Very very helpful, I can do it with your sample. Thank you!

Tanaike Over a year ago

@user2946433 Welcome. I'm glad your problem was solved.

Collectives™ on Stack Overflow

Custom form (Web App) to send value and use it with Google Apps Script

1 Answer 1

From:

To:

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

From:

To:

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related