How do I pass a value from an HTML form submission to a Google Sheet and back to HTML in a Google Apps Script Web App

Question

I'm trying to create a basic time clock web app.

So far, I'm using this script to create this web app which takes the input values and puts them in this spreadsheet for the time stamping part.

I need it to use one of the values from the form and perform a lookup in this sheet (take the longId and find me the name) and return the (name) value to the html page as a verification for the end user that they were identified correctly. Unfortunately, I don't know enough to grasp what I'm doing wrong. Let me know if I need to provide more info.

Edit 1

I'm thinking that I wasn't clear enough. I don't need the user info from entry, I need the user from a lookup. The user will be entering their ID anonymously, I need to match the ID to their info, and bring the info back for them to verify.

Edit 2

Using the link provided by Br. Sayan, I've created this script using this spreadsheet as above to test one piece of this. The web app here spits out: undefined. It should spit out "Student 3" Still not sure what I'm doing wrong.

Answer 1

Please try this one:

_{(source: technokarak.com)}

Also please have a look at:

Retrieve rows from spreadsheet data using GAS

EDIT:

Please make these changes in your function and let us know.

function findValue() {
  var data =        SpreadsheetApp.openById("15DRZRQ2Hcd7MNnAsu_lnZ6n4kiHeXW_OMPP3squbTLE").getSheetByName("Volatile Data").getDataRange().getValues();
  for(i in data) {
    if(data[i][3] == 100000003) {
      Logger.log("yes");
      Logger.log(data[i][0]);
      var student = [];
      student.push(data[i][0]);
      return student;
    }
  }
}

Answer 2

One way for the next button to grab the student input field:

<input type="submit" onclick="studentName(document.getElementById('student').value)" value="Next..."/>

That sends the value to this func in Javascript.html:

function studentName(value) {
  google.script.run
  .withSuccessHandler(findSuccess)
  .findStudent(value);
}

Which sends it to a findStudent(value) in Code.gs You do the lookup and the return value goes back to findSuccess( result ) back in Javascript.html. Handle the result from there.

Also consider keeping the stock preventDefault() code that comes with the Web App template in the Help > Welcome Screen.

Answer 3

It is a complicated answer, I have had a lot of success with:

function process(object){

  var user = Session.getActiveUser().getEmail();
  var key = object.Key;

  send(key);

}

function send(k){

  var ss = 
SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var lastR = ss.GetLastRow();

  ss.GetRange(lastR,1).SetValue(k);

}

On your html button you will need to have inside the tags

onClick="google.script.run
          .withSuccessHandler(Success)
          .process(this.parentNode);"

In order for this to work, obviously you will need to have your fields named accordingly.

Edit: The only thing I did not include in the code was a Success handler, which will be in your html of the GAS script. This should point you in a direction that can resolve that.

Hope this helps.