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)

https://i.sstatic.net/PJ3Hp.png

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)

https://i.sstatic.net/PJ3Hp.png

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

Transitioning from jQuery to Prototype

Building a stylish table using Material UI in ReactJS

Convert an array to UTF-8 encoding and extract the values into a text input field

When querying a MongoDB object in Node.js, the inner value may sometimes return as undefined

The jQuery extension for XDomainRequest in the $.ajax function called onprogress is

The MySQL query is returning a blank result with only the column headings displaying

What is the best way to access the value of an HTML tag in React?

What is the reason behind the necessity of using setTimeout with a delay of at least 50ms for JS .focus()

JavaScript HTTP Requests

What is the best way to structure my POST data when conducting tests on an express API endpoint?

Adjust the anchor tag content when a div is clicked

Styling the button in jQuery to switch between disabled and enabled

Is there a way to dynamically calculate the total of a column when a new row is added using Javascript?

In what situations might a finally block fail to execute?

ClickAwayListener's callback function stops executing midway

What is the best approach to convert text to uppercase or lowercase based on the length of the string in Angular version 1.5?

Encountering an error: Module missing after implementing state syntax

How to dynamically assign a value in a React datepicker component in a React application

What is the best way to send a request every 2 seconds using AngularJS and Node.js?

Sass is throwing an error message saying 'Module not found' during the compilation process