Clicking data into a Google spreadsheet using JavaScript running in a browser

Question

I am working on a web application where I would like to allow the user to enter data into my Google spreadsheet.

First, I tried using the Google APIs API Client Library for JavaScript , but it doesn't seem to cover the Spreadsheet API ( https://developers.google.com/apis-explorer/#p/ ).

Then I decided to use the Google Spreadsheets API version 3.0 directly. I manage to get user tables using jQuery and JSONP :

 $.ajax({ url: 'https://spreadsheets.google.com/feeds/spreadsheets/private/full?alt=json-in-script&access_token=' + access_token, dataType: 'JSONP', success: function(data){ // use the spreadsheets } }); 

In the same method, I retrieve sheets from a user-selected table. Then I have to POST pass the data to the selected sheet. And here the problem arises: cannot do this using JSONP . And the Google server does not seem to support CORS . I get the following error in the browser:

XMLHttpRequest cannot load https://spreadsheets.google.com/feeds/... Origin ..mysite.. is not allowed by Access-Control-Allow-Origin.

Thanks for looking at this.

Answer 1

I have been doing this for about 8 months. I came across a blog post written by Martin Howski . I followed the explorer here, and I was able to configure the submission of an HTML form to a spreadsheet.

In fact, you set up a published web application inside a spreadsheet that can receive data. To get around CORS issues, you target a hidden iframe on the page. I would copy the code in this post, but there is a bit.

Demo

• Here is the HTML form.
• Here is the table receiving the data.

I will provide some advice that I would have liked to give me when I started looking at it. If you can ... try setting up a PHP server that you can use. Posting data is much simpler and more flexible. Now I am using Zend GData at work and want me to find it earlier :)

EDIT

Marting Hawskey updated this to support AJAX feeds without using a hidden iframe. See here .

Answer 2

Step-by-step instructions with screenshots

After reading Martin Howski a good presentation (for sending data from an HTML form to a Google spreadsheet) and looking at a few spaces / assumptions, we decided to write a detailed / comprehensive guide with step-by-step instructions that several people found useful:

https://github.com/dwyl/ html -form- send -email-through- google- script -without server

The script saves any data sent via HTTP POST in a Google spreadsheet, and possibly redirects the content to an email address. (useful if you want to be notified of new data)

HTML form:

Result (line in sheet):

Hope this helps others.