通过angular提交google表单而不离开页面答案

【问题标题】：Submit google form through angular without leaving page通过angular提交google表单而不离开页面
【发布时间】：2015-05-03 20:01:58
【问题描述】：

我从表单字段中获取 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 表单 URL？

【问题讨论】：

你可能想看看这个 Stackoverflow 问题：stackoverflow.com/questions/29267773/…

标签： angularjs forms google-forms

【解决方案1】：

在保持表单提交到 Google url 的同时，我能找到解决此问题的唯一方法是执行以下操作：

表格

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

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

【讨论】：