DEV Community

Discussion on: Submit a Form to a Google Spreadsheet

Collapse
 
shristi1 profile image
Shristi Sharma • Edited

Hi Omer! Thank you so much for this post. As a high schooler, your tutorial is much easier to follow than others.
I am sending data from a js file (without an HTML form) to my google sheet and I do get a "Success! {}" message in the console and the timestamp updates, but the rest of the columns on my sheet never update with data. I have checked to make sure my column headers and code match up and are case sensitive.
My code on Google Apps Script is the exact same as yours, and this is how I am sending data from my js file:

// Send Data to Google Sheets
  var formData = {
    'name': 'Bob Smith',
    'email': 'bob@example.com'
  };
  var options = {
    'method' : 'post',
    'payload' : formData
  };
  fetch(scriptURL, options)
      .then(response => console.log('Success!', response))
      .catch(error => console.error('Error!', error.message))
Enter fullscreen mode Exit fullscreen mode

Could you please help me out?

Collapse
 
shristi1 profile image
Shristi Sharma

Solved it! This link explains the solution: github.com/jamiewilson/form-to-goo...
But, one small change from the link above is not putting quotes in FormData() because it signifies a string, and the workaround should be to create a null HTML Form element.
So use: var sendingData = new FormData()
Instead of: var sendingData = new FormData('')

Solution code for js file:

saveToGoogleSheet () {
  const scriptURL = 'https://script.google.com/macros/s/.../exec'
  var sendingData = new FormData() // adjusted here
  sendingData.append('some_key', some_var_with_value)
  fetch(scriptURL, {method: 'POST', body: sendingData}) // adjusted here
    .then(response => console.log('Success!', response))
    .catch(error => console.error('Error!', error.message))
}
Enter fullscreen mode Exit fullscreen mode