Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AJAX post to google spreadsheet

Tags:

I am attempting to post form data to a google spreadsheet. Currently, if the form is validated, then the following occurs:

if (validateForm === true) {         $.ajax({             type: 'post',             url: 'https://docs.google.com/spreadsheet/ccc?key=0AlwuDjMUxwhqdGp1WU1KQ0FoUGZpbFRuUDRzRkszc3c',             data: $("#workPLZ").serialize(),             success: alert($("#workPLZ").serialize())         });     }     else {} 

I used the success setting to verify my form data is being serialized properly (it is) and that it is successful. However, my google spreadsheet is not being updated (no data is going through). I used the example code here, changing doGet to doPost (http://mashe.hawksey.info/2011/10/google-spreadsheets-as-a-database-insert-with-apps-script-form-postget-submit-method/), and have made the google spreadsheet publicly available (and editable by anyone). I followed the instructions, copying in the code to googledocs and then running the setUp twice (first time asked for permission, second time I ran it I didn't notice anything happen). Can anyone help me? I feel like I am super close.

like image 747
Stuart Nelson Avatar asked Apr 03 '12 19:04

Stuart Nelson


People also ask

How do I pull live data into Google Sheets?

In a Google Sheet, select Add-ons from the main menu, then Supermetrics > Launch. Select a data source from the list of available sources and authorize it to share data with Supermetrics. Build a query using the options available and then click Get Data to Table.

Does Google Docs use Ajax?

Some good examples of Ajax applications are Google Maps (http://maps.google.com/), Gmail (http://gmail.google.com/), and Google Docs and Spreadsheets (http://docs.google.com).

Can Google Sheets pull data from an API?

Once you've set up your API to Google Sheets connection, click Save And Run to get data to your spreadsheet.


1 Answers

Alright, I came up with a solution. After being informed of the cross-domain AJAX issues, I decided to go ahead and follow to a "t" the method used by the article author at http://mashe.hawksey.info/2011/10/google-spreadsheets-as-a-database-insert-with-apps-script-form-postget-submit-method/.

To post data to your google spreadsheet, first make the spreadsheet and change the sheet name (lower left hand corner) to DATA. Next, open the script editor (Tools ==> Script Editor) in your spreadsheet and paste the script from the article. Change "doGet(e)" to "doPost(e)". Run the setUp script twice. The first time it will ask for permission to run (grant it), then the second time you select to run it you won't get any popup indication it has run (I ran mine in the editor so it said "running setUp" above the code entry area, but that was all). After that, select "Publish" in the script editor, and then select "Publish as Service". Click the "Allow anyone to invoke this service" radio button and the "Allow anonymous access" check box. Copy the URL (IMPORTANT!) and click "Enable Service". This was the "difficult part".

In your HTML form, each element that you're submitting must have a "name" attribute (e.g. ) This name is how the data is sent - each entry is attached to its name. Make sure that for every piece of form data you're collecting, it has a name, and that name is entered as a column on your spreadsheet (that's how it maps the data from your form to your spreadsheet). For your form, set the method to post and the action to your "Publish as Service" URL (which I told you to save) like this:

<form id="formID" method="post" action="URL" target="hidden_iframe"> 

I included a form id so I can select the form and submit it with jquery. In your HTML, before the above form, add your hidden iframe:

<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"></iframe> 

Set some sort of form validation (not necessary, but if every field isn't filled out you'll get incomplete data in your spreadsheet), and if it is validated have it call a jquery .submit(). e.g.:

    if (formValidation === true){            $("#formID").submit();     }     else {} 

So that's that. Good luck!

like image 143
Stuart Nelson Avatar answered Jan 02 '23 15:01

Stuart Nelson