CODEWITHSUNDEEP
angularjsformsgoogle-forms
Morgan
Morgan

Reputation: 584

Submit google form through angular without leaving page

I'm taking the POST data from a form field and sending it to a Google Spreadsheet through Google Forms. I would like to submit the form so that it does not redirect to the submission page for Google Forms on completion.

Here is my form code:

<form ng-submit="bookingForm()">
    <input class="input-field" type="datetime-local" id="schedule-date-input" name="entry.127627252" value="" ng-model="schedule.datestart">
    <label class="input-label" for="schedule-date-input">
        <span class="input-content">Start Date</span>
    </label>

     ... more inputs ...

    <input type="submit" name="submit" value="Submit">
</form>

and here is my js:

'$scope', '$http', function ($scope, $http) {
        $scope.bookingForm=function(){
            console.log($scope.schedule);

            $http({
                method:'POST',
                url: 'https://docs.google.com/forms/d/MY-FORM/formResponse',
                data:$.param($scope.schedule),
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},

            }).success(function(response) {
                alert('yes');
            }).error(function(response) {
                alert('no');
            });
        };

On submission of the form, I get the following error:

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

How do I set up my form so that it will submit to the Google Forms url without leaving the page?

Upvotes: 2

Views: 5284

Answers (1)

Morgan
Morgan

Reputation: 584

The only way I could find to fix this while still keeping the form submitting to the Google url was to do the following:

Form

<form target="fake-target" method="POST" action="https://docs.google.com/forms/d/MY-FORM/formResponse" onsubmit="custommsg(); return true;">

JS

<script type="text/javascript">
function custommsg() {
    document.getElementById("form-message").style.display = "";
    document.getElementById("form-message").innerHTML = "Thank you!<br/><a href='#end'><button class='btn'>Next</button></a>";
    document.getElementById("form-container").style.display = "none";
            }
</script>

<div class="ss-form-container" style="display: none;" id="form-message"></div>
<iframe src="#" id="fake-target" name="fake-target" style="width:0px; height:0px; border:0px;"></iframe>

Upvotes: 0

Related Questions