Validate Spreadsheet in a HTML Service

Question

I have an html form I created with HTML Service in Google Sheets. The form has three fields in it. I want to check if the data they entered in one of the fields is contained in a column of sheet2. If it is not, I just want to display an alert box saying "invalid input". Whats the best way to do this? This is my submit form. The line of code that compares the value to "test", is where I want to check against a value in the spreadsheet.

function formSubmit() {

  if (document.getElementById("sku").value === "test") {

    alert(document.getElementById("sku").value);
  } else {
    google.script.run.appendRowstoSheet(document.forms[0]);
    document.getElementById("sku").value = ' ';
    document.getElementById("sku").focus();
  }
}

gs Code:

//insertValuestoSheet
function appendRowstoSheet(form){
  var sku = form.sku,
  loc_array = [{}];
  location = form.location,
  reference = form.reference

  loc_array = location.split("-");
  sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  //validateMySheet();

  //don't insert blank sku's
  //Also want to have it so it doesn't insert values where if the sku
  //doesn't match a sku in sheet2, column A. Alert the user if this condition

  if (sku != " ") {
    sheet.appendRow(["'"+reference," "," "," ","'"+sku, "1", " ", " ", " ", "'"+loc_array[0],"'"+loc_array[1],"'" + loc_array[2],"'"+loc_array[3]]);
  }
}

I modified my code with a better function name and added the function. Currently in appendRowstoSheet, it inserts into the spreadsheet. How do I return a failure here if my condition isn't met. Am I understanding that correctly?

Answer 1

You need to return something:

if (sku != " ") {
  sheet.appendRow(["'"+reference," "," "," ","'"+sku, "1", " ", " ", " ", "'"+loc_array[0],"'"+loc_array[1],"'" + loc_array[2],"'"+loc_array[3]]);
  return true;
} else {
  return false;
};

Note the use of return true; and return false; . Either true or false will be returned to your HTML code and passed to the success handler.

You need to run a withSuccessHandler() and do the final processing in that separate "success" function. First get the data out of the spreadsheet. Then if that is successful, a different function will run that compares the values.

<script>

function onSuccess(argReturnValue) {
  Console.log('argReturnValue: ' + argReturnValue);

  if (argReturnValue === true) {
    //Code here
  } else {


  };



  //Note that the argument: argValuesFromSpreadsheet is the return value from
  //the gs script function, "getValuesFromForm"

  var valueFromForm = document.getElementById("sku").value;

  //You'll need to modify this line to get a specific value
  var valueFromSpreadsheet = argValuesFromSpreadsheet[0];

  Logger.log('valueFromSpreadsheet: ' + valueFromSpreadsheet);

  if (valueFromForm === valueFromSpreadsheet) {

    alert('alert text here: ' + document.getElementById("sku").value);

  } else {

    document.getElementById("sku").value = ' ';
    document.getElementById("sku").focus();
  }
}

function formSubmit() {

  google.script.run
    .withSuccessHandler(onSuccess)
    .getValuesFromForm(document.forms[0]);
};

</script>

Note: You will need to make some modifications to the code, depending on what data, and the format of the data being returned from the spreadsheet:

var valueFromSpreadsheet = argValuesFromSpreadsheet[0];

That line needs to be modified.