Ajax javascript post to Google Spreadsheet without jQuery

Question

I would like to get help with using ajax without jQuery to post data info a Google spreadsheet please.

As in jQuery it is really simple and goes like this:

var gformUrl = 'https://docs.google.com/forms/d/abcdefg1234567890/formResponse';

var gformData = {
    'entry.1405357202': 'text #1',
    'entry.2112718259': 'text #2',
    'entry.1657451952': 'text #3',
    'entry.737451165': 'text #4'
};

$.post(gformUrl,gformData);

Now even that it shows an error in the console for no cross origin, it still works great.

I'm trying to do not use jQuery and do that in pure javascript, but with no success just yet, here's my code:

var xhr = new XMLHttpRequest();
xhr.open('POST', gformUrl, true);
xhr.send(JSON.stringify(gformData));

You said you were getting a cross origin error, but the $.post() method still works by adding those entries in your spreadsheet? — boombox
– boombox, Commented Apr 22, 2015 at 23:10
YEP! the wonders of jQuery I guess ;) XMLHttpRequest cannot load https://docs.google.com/forms/d/abcdefg1234567890/formResponse. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. — Gil Goldshlager
– Gil Goldshlager, Commented Apr 22, 2015 at 23:11

Barmar · Accepted Answer · 2015-04-22 22:38:12Z

1

$.post sends the data in URL-encoded format, not JSON. This is param=val&param=val&... format.

var formDataArray = [];
for (var key in gformData) {
    formDataArray.push(encodeURIComponent(key) + '=' + encodeURIComponent(gformData[key]));
}
xhr.send(formDataArray.join('&');

answered Apr 22, 2015 at 22:38

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gil Goldshlager Over a year ago

Thanks but unfortunately it still doesn't works and just gives the cross origin error in the console as in jQuery but not working.

XMLHttpRequest cannot load https://docs.google.com/forms/d/abcdefg1234567890/formResponse. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

Gil Goldshlager Over a year ago

As @boombox mentioned there is a need to set a request header, combine that with your code solved the issue, so thanks :)

boombox · Accepted Answer · 2015-04-23 12:57:32Z

0

If $.post() is working even with the Access-Control-Allow-Origin error, the culprit is likely to be the type of data that is being sent. According to the MDN article on CORS, a simple cross site request with POST requires the content-type of the data to be either application/x-www-form-urlencoded, multipart/form-data, or text/plain.

Currently, your XMLHttpRequest() sends JSON with a content-type of text/html. Let's fix that.

Knowing this, below is what you can try by setting the content-type request header to be application/x-www-form-urlencoded and sending encoded data.

--EDIT-- Changed my previous xhr.send(encodeURIComponent(JSON.stringify(gformData))); to Barmar's solution with my own twist to avoid the use of an array.

var gformUrl = 'https://docs.google.com/forms/d/abcdefg1234567890/formResponse';

var gformData = {
    'entry.1405357202': 'text #1',
    'entry.2112718259': 'text #2',
    'entry.1657451952': 'text #3',
    'entry.737451165': 'text #4'
};

var xhr = new XMLHttpRequest();
xhr.open('POST', gformUrl, true);
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded; charset=UTF-8');

var formData = '';
for (var key in gformData) {
    formData += encodeURIComponent(key) + '=' + encodeURIComponent(gformData[key]) + '&';
}
xhr.send(formData.substr(0, formData.length-1));

edited Apr 23, 2015 at 12:57

answered Apr 22, 2015 at 23:29

boombox

2,4562 gold badges14 silver badges16 bronze badges

1 Comment

Gil Goldshlager Over a year ago

So combine your answer (setting a request header) together with @Barmar code that convert the JSON info a URL-encoded format, did the job.

Collectives™ on Stack Overflow

Ajax javascript post to Google Spreadsheet without jQuery

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related