How to have a Google Form retrieve spreadsheet data and display it on a Google Site?

Question

Desired Outcome: To be able to enter a search term in a Google Form (presumably but not necessarily; could be a form in a standard web page) and have the relevant data retrieved from a Google Sheet and displayed in Google Site web app.

I learnt how to retrieve data from a parameterized URL and display in a Google Site in this question: How to include data in a URL for a Google Apps Script web app to read?

So the "tech" for retrieving and displaying spreadsheet data is there but I don't know where to start when it comes to pulling the data from a online form rather than a URL. Perhaps on submit, read the form values somehow, create a parameterized URL and go to that page to display the data?

Answer 1

How about this sample? This is a very simple sample script. Please modify it to your environment. This sample retrieves data on Spreadsheet using the search text, and displays the matched row. In order to use this sample, please carry out as follows.

1. Copy and paste the following scripts to your script editor.
2. Input spreadsheet ID and sheet name which is used for searching data.
3. Deploy Web Apps and run script.
4. Input search text and push "ok" button.

Script :

Google Apps Script : code.gs

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate();
}

function getData(e) {
  var id = "### Spreadsheet ID ###";
  var sheetname = "### Sheet name ###";
  var data = SpreadsheetApp.openById(id).getSheetByName(sheetname).getDataRange().getValues();
  var ar = [];
  data.forEach(function(f) {
    if (~f.indexOf(e.searchtext)) {
      ar.push(f);
    }
  });
  return ar;
}

HTML : index.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<input type="text" name="searchtext">
<input type="button" value="ok" onClick="getData(this.parentNode)" />
</form>
<pre id="disp"></pre>

<script>
function dispData(e) {
  $('#disp').text(JSON.stringify(e));
}
function getData(e) {
  google.script.run.withSuccessHandler(dispData).getData(e);
}
</script>

Sample spreadsheet :

Result :

If I misunderstand your question, I'm sorry.