表单onsubmit重定向导致表单未提交 - form onsubmit redirect causing the form not being submitted

form onsubmit redirect causing the form not being submitted

本文关键字：表单提交 onsubmit 向导 | 更新日期: 2023-09-27

我有这个问题，我似乎无法解决。。

我有一个表格，可以将数据提交到谷歌表单中。

<form action="https://docs.google.com/sheeturl" method="post" target="hidden_iframe1">

它运行得非常好（但会将用户重定向到谷歌表单感谢页面）。

我试图阻止这种行为（我想在自己的域上加载一个感谢页面），并添加了以下onsubmit事件

onsubmit="window.location.href = 'http://thankyoupage.html';"

这本身不会改变任何事情。所以我添加了

return false;

现在重定向工作正常（加载我的感谢页面），但是表单数据没有提交到表单中。

我很确定有一个平庸而简单的解决方案，但我只是缺乏解决它的知识。谢谢

通过设置return false，你基本上是在劫持表单的功能——它根本不会像那样发布到谷歌上。请尝试使用AJAX提交表单。使用jQuery可以这样做：

$("#ajaxForm").submit(function (e) {
    e.preventDefault();
    $.ajax({
        url: "https://docs.google.com/forms/d/FORMKEY/formResponse",
        beforeSend: function (xhr) {
            xhr.setRequestHeader('Access-Control-Allow-Origin', 'chrome-extension://EXTENSION_ID');
            xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET, POST, PUT');
        },
        data: JSON.stringify($(this).serializeArray()),
        type: "POST",
        dataType: "xml",
        xhrFields: {
            withCredentials: true
        },
        statusCode: {
            0: function () {
                document.getElementById("message").innerHTML = "Your form has been submitted!";
                window.location.replace("http://thankyoupage.html");
            },
            200: function () {
                document.getElementById("message").innerHTML = "Your form has been submitted!";
                console.log("Success");
                window.location.replace("ThankYou.html");
            }
        }
    });
});