通过角度提交谷歌表格而不离开页面

时间:2015-05-03 20:01:59

标签: angularjs forms google-form

我正在从表单字段中获取POST数据,并通过Google表单将其发送到Google电子表格。我想提交表单,以便在完成时不会重定向到Google表单的提交页面。

这是我的表单代码:

<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>

,这是我的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');
            });
        };

提交表单后,我收到以下错误:

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.

如何设置表单,以便在不离开页面的情况下提交到Google表单网址?

1 个答案:

答案 0 :(得分:0)

在保持表单提交到Google网址的同时,我找到解决此问题的唯一方法是执行以下操作:

<强>表格

<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>