使用帖子自定义Google Apps脚本方法，以便将数据追加到工作表

Question

currently i trying to send/append data to spreadsheet using google apps script, but if i click the submit button i want to the page not redirect as https://www.selly.id/ if you try to send data from it form , it only change the UI and the data is sended to sheet, so do i must change it using JS , or other methods

here is my current website https://selly-midtrans.herokuapp.com/ , but it now working correctly yet

function doPost(e){
  var vals=[];
  vals.push(new Date());
  for(var i in e.parameter){
    vals.push(e.parameter[i]);
  }
  SpreadsheetApp.openById("1gMjG4MWTLzoPncVkJ_nGimYdiXULzCvYt5nvqCf4Z4o").appendRow(vals);
//  return ContentService.createTextOutput("added");
}

function doGet(e){
  var vals=[];
  vals.push(new Date());
  for(var i in e.parameter){
    vals.push(e.parameter[i]);
  }
  SpreadsheetApp.openById("1gMjG4MWTLzoPncVkJ_nGimYdiXULzCvYt5nvqCf4Z4o").appendRow(vals);
  return ContentService.createTextOutput("added");
}

here's my form

<form  id="form" method="post" action="https://script.google.com/a/41studio.com/macros/s/AKfycbwlP_LSQSRHI0wIoJtfwFXiAJttawlYV5dN1PFpAOMtdZ2D-Iz7/exec" accept-charset="UTF-8">
    <input type="text" name="newletter_name" placeholder="Name"/>
    <input type="text" name="newletter_email" placeholder="Email"/>
    <input type="submit" value="Subscribe"/>
</form>

I'm Kind Of Confused

FYI : im develop it using react JS

Answer 1

Instead of making a POST request from your form, you can use Javascript to do it for you and prevent the page from reloading.

Since you are using react the trigger is onSubmit={this.handleSubmit}

Then create the method to handle the submit, something like below. YO

handleSubmit = (e) => {
  e.preventDefault(); //this prevents the page from reloading
  const opts = {
    method: 'POST',
    body: ...  //fix this to whatever parameters you are passing
  };

  fetch(URL, opts)
    .then(response => console.log(response))
    .catch(error => console.log(error));
}

The documentation for using the fetch API is here

You can use a package like axios to handle the fetch request much more easily.

I made a blog post about using the doPost(e) in Google Apps Script however, it doesn't use ReactJS so it might not help.