Search code examples
ajaxinternet-explorerwebkitxmlhttprequest

Webkit and IE - AJAX form submition to docs.google.com error


Despite the fact that there are lots of questions in stackoverflow related to XMLHttpRequest and same-origin-policy error, I didn't find solution for my issue. Even though the The same origin policy wiki gives a great reference to the related subject, I wasn't able to find proper way.

The issue is that WebKit based browsers and IE raise bellow issue when I try to submit form data to google forms. However, the mentioned browsers successfully submit the data and I have it in my spreadsheet.

XMLHttpRequest cannot load https://docs.google.com/a/<myDomain>/forms/d/<myFormKey>/formResponse. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://127.0.0.1:9000' is therefore not allowed access. 

On the other hand FireFox does the job and returns status code: 200 OK. The question is how can I solve the issue, that WebKit based browsers and IE show status code 0 OK or 200 OK?

here is the code that I am using

HTML:

<form name="quickMessageForm" submit="postQuickMessageToGoogle()" >
  <input type="text" name="name" id="name"><br>
  <input type="email" name="email" id="email">
  <textarea name="content" id="content"></textarea>
  <button type="submit">Submit</button>
</form>

JavaScript

$scope.postQuickMessageToGoogle = function() {
  $.ajax({
    url: 'https://docs.google.com/a/<myDomain>/forms/d/<myFormKey>/formResponse',
    data: {
      'entry.397424023'   : $scope.quickMessage.name,
      'entry.1127838473'  : $scope.quickMessage.email,
      'entry.1078099467'  : $scope.quickMessage.content
    },
    type: 'POST',
    dataType: 'xml',
    statusCode: {
      0: function (){
        successSubmit(
          $scope.quickMessage.name,
          $scope.quickMessage.email,
          $scope.quickMessage.content
        );
      },
      200: function (){
        successSubmit(
          $scope.quickMessage.name,
          $scope.quickMessage.email,
          $scope.quickMessage.content
        );
      }
    }
  });
}

Solution

  • I had the same issue and I solved it following iShow's comment on this post. the problem seemed in the dataType: 'xml'. When I changed it to the dataType: 'jsonp' the problem was solved.