1

I have a form on a webpage which I'm using to capture data and post to a Google Form. The code I've used I saw on this answer. Now, as expected, I'm receiving an error like the following:

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

My script making the request is as follows:

function postToGoogle() {
    $.ajax({
    url: "https://docs.google.com/forms/d/.../formResponse",
    data: {"entry.1691469052": "test message"},
    type: "POST",
    dataType: "xml",
    success: function() {
        alert("Success");
    },
    error: function() {
        alert("Error");
    }
});
}

$(document).ready(function(){
    $('#form').submit(function() {
        postToGoogle();
        return false;
    });
});

Now even though I get the error, my data still persists to the form which is the outcome I want.

The issue I'm facing is that in the event that data is passed, I want to display a message to the user saying the data was received. What I'm trying to do is either:

  1. fix the error through using CORS or similar (methods I'm not familiar with and can't find an answer for on SO)
  2. somehow check within my 'error' function that the only issue is the No 'Access-Control-Allow-Origin' one and then produce a 'success' message in that scenario. If there are other issues I'll just throw an 'error' message back to the user

So far I've not been able to find something that works. Any thoughts?

Community
  • 1
  • 1
danw
  • 1,608
  • 4
  • 29
  • 48

1 Answers1

0

See the $.ajax doc:

error

Type: Function( jqXHR jqXHR, String textStatus, String errorThrown )

A function to be called if the request fails. The function receives three arguments: The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object, a string describing the type of error that occurred and an optional exception object, if one occurred. Possible values for the second argument (besides null) are "timeout", "error", "abort", and "parsererror". When an HTTP error occurs, errorThrown receives the textual portion of the HTTP status, such as "Not Found" or "Internal Server Error."

So you can write something like:

error: function( jqXHR, textStatus, errorThrown ) {
  if( errorThrown.indexOf("Access-Control-Allow-Origin") > 0 ) { 
   // success...
  }

The error text can also be inside jqXHR.responseText.

Ilya
  • 5,377
  • 2
  • 18
  • 33
  • Thanks for your answer Ilya. Inside my `error` function I now have `alert(jqXHR.responseText);` which displays an empty alert box, so I'm assuming it's not picking up the error text? – danw Mar 31 '16 at 20:53
  • And `jqXHR.getResponseHeader()` ? – Ilya Mar 31 '16 at 21:06
  • Nothing still, that just throws the following error in the console: `Uncaught TypeError: Cannot read property 'toLowerCase' of undefined` – danw Mar 31 '16 at 21:08
  • And `jqXHR.status` is zero ? – Ilya Mar 31 '16 at 21:15
  • So it seems you can't tell this error appart from a "blank" error response. Maybe you can risk interpreting blank error => success, if you don't have a better option (i.e. making CORS work). – Ilya Mar 31 '16 at 21:44