Tuesday, 27 August 2013

how to submit form to Google Docs URL from local site without Access-Control-Allow-Origin issues?

how to submit form to Google Docs URL from local site without
Access-Control-Allow-Origin issues?

Background
I have a form submission that I need to make to a Google Docs form
Unfortunately this is a hard requirement for the given situation.
I need to create a web page as a better interface to this form (long story
short: folks will be using an iPad to enter information and it needs
certain UI touches that the google form doesn't have by default).
I can make this submission via the "action" of the HTML form; however, I
need to override the form submit so that
Goal
When the submit button is clicked, submit the form via Ajax and do
something based on the success or failure of the response.
Problem / Question
As expected, I see the following error in Chrome (form key omitted);
XMLHttpRequest cannot load
https://docs.google.com/formResponse?formkey=[...]&ifq. Origin null is not
allowed by Access-Control-Allow-Origin.
How can I avoid this? Is there any way I can submit this data to the
Google Form without triggering this issue?
Code so Far
HTML page:
<form id="ss-form" name="googleform" class="pure-form pure-form-aligned">
<!-- Fields omitted for brevity -->
<input type="submit" class="pure-button pure-button-primary"
id="btnSubmit" />
</form>
JavaScript:
$(document).ready(function () {
console.log("Document Ready");
disableFormSubmissionEvent();
wireUpSubmitButton();
});
disableFormSubmissionEvent = function () {
console.log("Disabling sumission Event");
$('#ss-form').submit(function () {
return false;
});
wireUpSubmitButton = function () {
console.log("Wiring up submit button");
$("#btnSubmit").click(function () {
submitForm();
});
JavaScript that attempts the form submission (form key omitted):
submitForm = function (event) {
console.log("obtaining form data");
var thedata = $('#ss-form').serialize();
console.log("Attempting Form Submission");
var submissionUrl =
"https://docs.google.com/formResponse?formkey=[...]&ifq";
$.ajax({
type: 'POST',
url: submissionUrl,
contentType: 'multipart/form-data',
data: thedata
}).success(function () {
clearForm();
showSuccessMessage();
}
)
.fail(function (jqXHR, textStatus, errorThrown) {
showFailureMessage(jqXHR, textStatus, errorThrown,
submissionUrl);
});

No comments:

Post a Comment