I'm working on a Chrome extension that's essentially a simple custom Google Form that will post to a response Spreadsheet. I got the following function to successfully send and populate data only once, but never again:

function postFormToGoogle() {
    var timeOne = $("#time1hour").val();
    var timeTwo = $('#time2hour').val();
    var timeThree = $('#time3hour').val();

    $.ajax({
        url: "",
        beforeSend: function (xhr) {
          xhr.setRequestHeader('Access-Control-Allow-Origin', 'chrome-extension://EXTENSION_ID');
          xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET, POST, PUT');
        },
        data: { "entry_856586387": timeOne, 
        "entry_244812041": timeTwo, 
        "entry_2138937452": timeThree },
        type: "POST",
        dataType: "xml",
        xhrFields: {
            withCredentials: true
        },
        statusCode: {
            0: function () {
                document.getElementById("message").innerHTML = "Your form has been submitted!";
                window.location.replace("ThankYou.html");
            },
            200: function () {
                document.getElementById("message").innerHTML = "Your form has been submitted!";
                console.log("Success");
                window.location.replace("ThankYou.html");
            }
        }
    });
}

I had to include the cors request headers because I was getting a No 'Access-Control-Allow-Origin' warning that blocked my request.

It being an extension, I also added the following permissions to the manifest.json file:

"permissions": [
  "",
  "",
  "https://*.google",
]

At this point, I'm not sure exactly what's preventing the data from posting. Possible indicators could be that when submitting the form I'm getting a "Provisional Headers are shown" caution and the server is taking way too long to respond as indicated by the Waiting (TTFB) time.

Where am I going wrong in the code? (It did work once, for some reason.) Any alternative solutions out there to post a custom form to Spreadsheets?

I'm working on a Chrome extension that's essentially a simple custom Google Form that will post to a response Spreadsheet. I got the following function to successfully send and populate data only once, but never again:

function postFormToGoogle() {
    var timeOne = $("#time1hour").val();
    var timeTwo = $('#time2hour').val();
    var timeThree = $('#time3hour').val();

    $.ajax({
        url: "https://docs.google./forms/d/FORMKEY/formResponse",
        beforeSend: function (xhr) {
          xhr.setRequestHeader('Access-Control-Allow-Origin', 'chrome-extension://EXTENSION_ID');
          xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET, POST, PUT');
        },
        data: { "entry_856586387": timeOne, 
        "entry_244812041": timeTwo, 
        "entry_2138937452": timeThree },
        type: "POST",
        dataType: "xml",
        xhrFields: {
            withCredentials: true
        },
        statusCode: {
            0: function () {
                document.getElementById("message").innerHTML = "Your form has been submitted!";
                window.location.replace("ThankYou.html");
            },
            200: function () {
                document.getElementById("message").innerHTML = "Your form has been submitted!";
                console.log("Success");
                window.location.replace("ThankYou.html");
            }
        }
    });
}

I had to include the cors request headers because I was getting a No 'Access-Control-Allow-Origin' warning that blocked my request.

It being an extension, I also added the following permissions to the manifest.json file:

"permissions": [
  "http://docs.google.",
  "https://docs.google.",
  "https://*.google.",
]

At this point, I'm not sure exactly what's preventing the data from posting. Possible indicators could be that when submitting the form I'm getting a "Provisional Headers are shown" caution and the server is taking way too long to respond as indicated by the Waiting (TTFB) time.

Where am I going wrong in the code? (It did work once, for some reason.) Any alternative solutions out there to post a custom form to Spreadsheets?

• javascript
• ajax
• forms
• google-chrome-extension
• google-sheets

• What's the datatype back from the server? Switch to dataType: "html", if it is html. – Dayton Wang Commented Mar 26, 2015 at 0:07
• Indeed, the response header content-type from the server is html. I switched the 'dataType' accordingly, but data is still not populating. I'm no longer getting the "Provisional Headers are shown" caution for the header request though. – corcovado Commented Mar 26, 2015 at 0:43
• Use document.getElementById("message").innerText instead of document.getElementById("message").innerHTML: developer.chrome./extensions/xhr. Also do you implement Cross-Domain XHRs in Content scripts? – Dayton Wang Commented Mar 26, 2015 at 1:02
• Turns out everything is fine with the code I shared. The main culprit was actually the input values on the html page. First I should point out that this form is using the Time Duration option on Google Forms, which has drop down menus for Hrs, Mins, and Secs. Digits 0 - 9 options had single digit values, when actually it's required that all values be double digits (01,02,etc.) in order for the request to be accepted. Thanks for your input, gui47. – corcovado Commented Mar 26, 2015 at 2:47

1 Answer 1

This is the way I did it... http://jsfiddle/adutu/7towwv55/1/ You can see that you receive a CORS error but it works... the data gets where it should be

        function postToGoogle() {
            var field3 = $('#feed').val();

            $.ajax({
            url: "https://docs.google./forms/d/[key]/formResponse",
            data: {"entry.347455363": field3},
            type: "POST",
            dataType: "xml",
            statusCode: {
                0: function() {
                    //Success message
                },
                200: function() {
                    //Success Message
                }
            }
        });
        }

See more info here