通过AJAX提交谷歌表单后停止页面重定向

时间:2014-12-22 10:09:32

标签: javascript jquery html ajax forms

我使用AJAX和谷歌电子表格收集新闻稿的电子邮件数据,方法是从表单字段中获取POST数据并通过谷歌表单将其发送到电子表格。我无法获取代码来阻止页面重定向到Google的感谢页面。这是下面的AJAX和表单代码。

<form class="form-inline" role="form" action="https://docs.google.com/forms/d/1TEPXPqigGuN8sayYjz-sk6H-5wAbPaImsgadM2PBFAk/formResponse" method="POST" id="newsletter-form" target="_self" onsubmit="">
    <input type="text" name="entry_291075079" value="" class="form-control" id="Email" dir="auto" placeholder="example@site.com"> 
</form>

<script>
    $("#newsletter-form").submit(function(e) {
        e.preventDefault();
        $.ajax({
            url: "https://docs.google.com/forms/d/1TEPXPqigGuN8sayYjz-sk6H-5wAbPaImsgadM2PBFAk/formResponse",
            data: $(this).serialize(),
            type: "POST",
            dataType: "xml",
            success: function(data) {
                console.log('Submission successful');
            },
            error: function(xhr, status, error) {
                console.log('Submission failed: ' + error);
            }
        });
    });
</script>

1 个答案:

答案 0 :(得分:1)

您的页面正在被重定向,因为它正在通过POST进行标准表单提交 - 您的javascript代码根本没有附加到表单提交。要执行您需要的操作,您可以将JS代码附加到表单的submit事件,并使用preventDefault()停止提交,如下所示:

<script>
    $('#ss-form').submit(function(e) {
        e.preventDefault();
        $.ajax({
            url: "url to google form responses",
            data: $(this).serialize(),
            type: "POST",
            dataType: "xml",
            success: function(data) {
                console.log('Submission successful');
            },
            error: function(xhr, status, error) {
                console.log('Submission failed: ' + error);
            }
        });
    });
</script>