We've seen how to [[read data from a spreadsheet on load]] and how to [[write to a spreadsheet]] using [[user input]]. What about interacting with a spreadsheet in other ways?
Let's imagine we want to take some user input, find the value associated with the input in the Sheet, and then return the value in the column one over.
First, we need to update our project's HTML to include a field for input and for output. Let's add a dropdown to restrict input and add an output field. Use the `<select>` tag and pass a list of `<option>` tags to initialize the dropdown, provide `id="selection"`. Use the `<input>` tag to create the output field and provide `id="output"`.
In `Code.gs`:
```JavaScript title="Code.gs"
function getData(input){
var ss = SpreadsheetApp.openById(id); // id is defined globally
var ws = ss.getSheetByName('data');
var data = ws.getDataRange().getValues();
var keys = data.map(function(r){return r[0]; });
var values = data.map(function(r){return r[1]; });
var position = keys.indexOf(input);
if(position > -1){ // indexOf method returns -1 if not found
return values[position];
} else {
'Unavailable'
}
}
```
Previously, we would have called this function within a function in `index.html`, like this:
```JavaScript title="index.html"
// this code will not work
function getLookup(){
var userSelection = document.getElementById("selection");
google.script.run.getData(input);
}
```
However, as you can see this doesn't give us the opportunity to do anything with the data that we return. You can't simply assign the output of the `getData` function to a variable like you might otherwise. Instead, you can use the `withSuccessHandler` method to pass the returned value from `getData` to another function.
Let's start by writing the function that will do what we want to do with our result from `getData` in `index.html`:
```JavaScript title="index.html"
function updateOutputField(lookupVal){
document.getElementById("output").value = lookupVal;
}
```
Next let's extend the `getLookup` with the success handler:
```JavaScript title="index.html"
function getLookup(){
var userSelection = document.getElementById("selection");
google.script.run.withSuccessHandler(updateOutputField).getData(userSelection);
}
```
To recap, you need three functions (and likely an event handler) to get data from a spreadsheet and then do something with it:
1. The app-side function that takes user input after the user completes an action (`getLookup`)
2. The server-side function that processes the input and returns something from the spreadsheet (`getData`)
3. The app-side function that is called upon success of the server-side function and passes the data back into the DOM (`updateOutputField`)
Often, you'll see the third function provided as input directly to the `withSuccessHandler` method. That would look like this:
```JavaScript title="index.html"
function getLookup(){
var userSelection = document.getElementById("selection");
google.script.run.withSuccessHandler(function updateOutputField(lookupVal){
document.getElementById("output").value = lookupVal;
}).getData(userSelection);
}
```
This looks quite confusing, but hopefully now you can see how this function would work.