Send information to a Google form using AJAX requests

Question

Send information to a Google form using AJAX requests

I have encountered an issue while attempting to send data via AJAX to a Google form. Despite receiving a success message with a statusCode of 0, the data does not show up in the form:

var dat={ "entry.529474552" :"data1", "entry.1066559787": "name1"};
postToGoogle("1FAIpQLSf4w1OQGsIncaiqXlmfAl4jYSt-e4Zx3xVJa7Weob4LnQbRZQ",dat);

function postToGoogle(id, dat) {
    $.ajax({
        beforeSend: function (xhr) {
            xhr.setRequestHeader('Access-Control-Allow-Origin', 'chrome-extension://EXTENSION_ID');
            xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET, POST, PUT');
            },
        url: "https://docs.google.com/forms/d/e/"+id+"/formResponse",
        data: dat, 
        type: "POST",  
        dataType: "xml",
        xhrFields: {  withCredentials: true },
        statusCode: {
            0:   function() {  console.log("OK") },
            200: function() {  console.log("error") },
            }
        });
    }

A CORS error is being generated, but supposedly, the POST request should still be successful.

javascript ajax google-docs

Answer 1

Answer №1

If you're looking to tackle this in April 2019

Today, I delved into this task. Here's the latest solution:

Every field in the Google Form is assigned a unique ID. To retrieve it, generate a pre-filled link by filling out all relevant form fields that you want to programmatically submit

Important Note: To ensure the URL can be accessed without restrictions, make sure to disable domain restriction (applies to GSuite paying users)

Afterward, copy the link and paste it into your browser. The URL structure should look like this:

https://docs.google.com/forms/d/e/[FORMID]/formResponse

Each parameter consists of a key/value pair format: entry.XXXXXX=value

The prefilled link will provide the value of XXXXX for each applicable field

The request must include the following headers:

Method: GET

Content-Type: application/x-www-form-urlencoded

The final request should resemble this:

https://docs.google.com/forms/d/e/123332233bsj333/formResponse?entry.123456=value1&entry.2333442=value2&submit=Submit

Don't forget to add submit=Submit at the end of your request!

Answer 2

If you're looking to tackle this in April 2019

Today, I delved into this task. Here's the latest solution:

Every field in the Google Form is assigned a unique ID. To retrieve it, generate a pre-filled link by filling out all relevant form fields that you want to programmatically submit

Important Note: To ensure the URL can be accessed without restrictions, make sure to disable domain restriction (applies to GSuite paying users)

Afterward, copy the link and paste it into your browser. The URL structure should look like this:

https://docs.google.com/forms/d/e/[FORMID]/formResponse

Each parameter consists of a key/value pair format: entry.XXXXXX=value

The prefilled link will provide the value of XXXXX for each applicable field

The request must include the following headers:

Method: GET

Content-Type: application/x-www-form-urlencoded

The final request should resemble this:

https://docs.google.com/forms/d/e/123332233bsj333/formResponse?entry.123456=value1&entry.2333442=value2&submit=Submit

Don't forget to add submit=Submit at the end of your request!

Answer 3

Answer №2

Despite encountering a CORS error, it is believed that the POST request should still be processed.

Although a successful POST request can be made, experiencing a CORS error and not being able to access the response only applies to Simple Requests.

This happens because your request includes:

Custom headers like Access-Control-Allow-Origin and Access-Control-Allow-Methods, which are actually response headers and should not be included in the request
Credentials (using withCredentials: true)

... turning it into a Preflighted Request.

Prior to executing the POST request, the browser will first send an OPTIONS request to seek permission.

Since permission is denied, the request fails.

It's important to note that even if you were to convert it to a simple request and successfully make the POST, the status would still be 0. In case of a CORS error, the status cannot be accessed.

Answer 4

Despite encountering a CORS error, it is believed that the POST request should still be processed.

Although a successful POST request can be made, experiencing a CORS error and not being able to access the response only applies to Simple Requests.

This happens because your request includes:

Custom headers like Access-Control-Allow-Origin and Access-Control-Allow-Methods, which are actually response headers and should not be included in the request
Credentials (using withCredentials: true)

... turning it into a Preflighted Request.

Prior to executing the POST request, the browser will first send an OPTIONS request to seek permission.

Since permission is denied, the request fails.

It's important to note that even if you were to convert it to a simple request and successfully make the POST, the status would still be 0. In case of a CORS error, the status cannot be accessed.

Send information to a Google form using AJAX requests

Answer №1

Answer №2

Similar questions

Tips for safeguarding your passwords across diverse authentication methods

Submitting form by clicking a link on the page

What is the best way to adjust the specific scope of every element generated by ng-repeat within a directive?

Incorporate the casper function within the casper.evaluate() method

Troubleshooting Issue with Public File Serving in ExpressJS Deployment (NodeJS/Express)

The challenge with the Optional Chaining operator in Typescript 3.7@beta

How to center items within a Toolbar using React's material-ui

How can I convert the left links in my navigation bar to a CSS drop-down menu to make it more responsive on small screens?

Activate Button upon Textbox/Combobox/RadDatePicker Modification through JavaScript

When using AngularJS filter, the comparator will evaluate to true and display the ng-repeat list even when the input

Achieving automatic restarts with grunt-express when files are updated

The Next JS build process is failing to generate certain paths

Troubleshooting a Custom Pipe Problem in Angular Material Drag and Drop

How to securely upload and generate a permanent link for the contents of a zip file using express js

Unleash the full potential of React and material-ui with the Raised Button feature - find out how to effortlessly keep all

JavaScript function failing to validate password

An Alternative Approach for Executing a Function within an AngularJS Directive

Obtain scope in AngularJS using object ID

Using Angular function to retrieve Firebase snapshot

Tips for triggering an error using promise.all in the absence of any returned data?