update spreadsheet in serverside code run from client html javascript not working

Question

I have an html where user requests add and enters data. The javascript in the body of the html calls the server side. I am unable to connect with the sheet either with saved ID or URL in order to add the row.

I cannot update of my spreadsheet despite @Serge insas comment that openById "it means "open for read and write". Am I making a simple mistake or is this impossible. The code initiated from the client side is running in the server.

const ssId = PropertiesService.getScriptProperties().getProperty('ssId');
var sheet = SpreadsheetApp.openById("[ssId]").getSheetByName('Sheet1');

const ssId = PropertiesService.getScriptProperties().getProperty('ssId');
var sheet = SpreadsheetApp.openById("ssId").getSheetByName('Sheet1');

Both get Error: Exception: Unexpected error while getting the method or property openById on object SpreadsheetApp.

  const ssUrl = PropertiesService.getScriptProperties().getProperty('ssUrl');
  var sheet = SpreadsheetApp.openByUrl("ssUrl").getSheetByName('Sheet1');

Gets error: Exception: Invalid argument: url

ABOVE IS THE IMPORTANT PART

---

/**
 *  this code is run from the javascript in the html dialog
 */
function addMbrCode(myAddForm)  {
//  removed logging 
  console.log("Beginning addMbrCode" );
  paragraph = body.appendParagraph('Beginning addMbrCode.');
  
  // Exception: Unexpected error while getting the method or property openById on object SpreadsheetApp.
//  const ssId = PropertiesService.getScriptProperties().getProperty('ssId');
//  var sheet = SpreadsheetApp.openById("[ssId]").getSheetByName('Sheet1');
//  var sheet = SpreadsheetApp.openById("ssId").getSheetByName('Sheet1');
  
// Exception: Invalid argument: url  
  const ssUrl = PropertiesService.getScriptProperties().getProperty('ssUrl');
  var sheet = SpreadsheetApp.openByUrl("ssUrl").getSheetByName('Sheet1');
  
  myAddForm =  [ fName, lName, inEmail, fallNum, winNum, sprNum];
  var fName = myAddForm[0];
  var lName = myAddForm[1];
  var inEmail = myAddForm[2];
  var fallNum = myAddForm[3];
  var winNum = myAddForm[4];
  var sprNum = myAddForm[5];
  
  var retCd = '';
  /**
   *  10 - successful add
   *  20 - duplicate - not added
   */  
  var combNameRng = sheet.getRange(2, 4, numRows).getValues();
  var inCName = (fName + '.' + lName).toString().toLowerCase();
  if (combNameRng.indexOf(inCName) > 0 )   {
    console.log("Alert: Not adding duplicate " 
                + fName + ' ' + lName + " retCd: " + 20 );
    paragraph = body.appendParagraph("Not adding duplicate " 
                                     + fName + ' ' + lName + " retCd: " + 20);
    retCd = 20;
    return retCd;
  }
  
  sheet.appendRow([fName.toString().toLowerCase()
                 , lName.toString().toLowerCase()
                 , 
                 , inEmail.toString().toLowerCase()
                 ]);
  const currRow = sheet.getLastRow().toString();

);

  retCd = 10;

  return retCd;
  
}

If this makes a difference, here is the javascript from the body of my html in the dialog window.

<script>
  document.querySelector("#myAddForm").addEventListener("submit", 
    function(e)
    {
      alert('begin addEventListener');
      e.preventDefault();    //stop form from submitting
      
      var retCd =  google.script.run.addMbrCode(this);   // client side validation

          document.getElementById('errMsg').textContent = 'Successful member 

      return false;  // do not submit - redisplay html
    }
  );
</script>

Removed unneeded coding detail

Per @iansedano I created an object/array to use instead of this and added the successhandler and failurehandler. In either case I want to see the html again with my message. This is the current script. Response is so doggy I am not seeing alerts, Logger.log, or console.log. Crazy shoppers using my inte.net!

<script>   

  document.querySelector("#myRmvForm").addEventListener("submit", 
    function(e)
      // removed alerts and logging
      // removed client side validation for simplicity
      cSideValidate();

      // Then we prevent the form from being submitted by canceling the event
      event.preventDefault();
    });
       
  function cSideValidate()  {

    dataObj = [
      document.getElementById('fName').value,
      document.getElementById('lName').value,
      document.getElementById('email').value
    ];
    var retCd = google.script.run.withSuccessHandler(serverReply)
                .withFailureHandler(serverReply)
                .rmvMbrCode(dataObj);  // server side validation
  }
  
  function serverReply {
    // logic to set the correct message - this is an example
    document.getElementById('errMsg').textContent 
             = 'Successful delete using email.';
  }
  
</script>

Nothing is being added to my spreadsheet so the server side code is not working. I see my loggin so I know it is getting there.

Answer 1

You're getting ssId from the script properties and assigning it to the ssId variable, but then you pass a string ( "ssId" ) to the openById() function, not the value of the variable. Try the following please:

const ssId = PropertiesService.getScriptProperties().getProperty('ssId');
var sheet = SpreadsheetApp.openById(ssId).getSheetByName('Sheet1');