使用 jQuery 以编程方式提交表单时遇到问题答案

【问题标题】：Trouble submitting form programatically using jQuery使用 jQuery 以编程方式提交表单时遇到问题
【发布时间】：2013-03-10 19:12:47
【问题描述】：

我试图在用户离开页面时以编程方式提交表单，无论他们是否点击了“提交”按钮。我过去曾使用此方法从函数中提交表单，但由于某种原因，我无法使其与 onclick 一起使用。

当用户单击“提交”按钮时，表单正在正确提交，因此 html 表单和 php 肯定设置正确。我正在使用 jquery-1.8.2

<form name="form2" id="form2" method="post" action="form2-exec.php">
    <!-- Form Elements -->
    <a class="back" href="form1.php" onClick="submitForm()">BACK</a>
    <a href="#" class="next"><input type="submit" value="SUBMIT" /></a>
</form>

<script language="javascript" type="text/javascript">
function submitForm() {
    $("#form2").submit();
}
</script>

我也尝试过使用点击功能

$(".submitForm").click(function () {
$("#taste").submit();
});

并替换 HTML 中的这一行：

<a class="back" href="form1.php" onClick="submitForm()">BACK</a>

与：

<a class="back submitForm" href="form1.php">BACK</a>

【问题讨论】：

标签： jquery onclick submit

【解决方案1】：

#Whizkid提交后右击后退按钮无效，尝试以下方法，它利用 jquery onbeforeunload 事件来测试表单是否已经提交；如果没有，它会显示消息，通知用户表单中未保存的数据：

$(function() {
        // Set the unload message whenever any input element get changed.
        $('input').change(function() {
            setConfirmUnload(true);
        });

        // Turn off the unload message whenever a form get submitted properly.
        $('form').submit(function() {
            setConfirmUnload(false);
        });
    });

    function setConfirmUnload(on) {
        var message = "You have unsaved data. Are you sure to leave the page?";
        window.onbeforeunload = (on) ? function() { return message; } : null;
    }

【讨论】：

有没有办法将它与提交结合起来，以便他们可以在弹出的消息中点击保存？另外，由于有 Input 和 Select 元素，我只是想验证我是否应该有两个单独的更改函数，或者有没有办法将两者组合成一个函数？
请重新表述第一个问题，让我更清楚，但在第二个问题上，你不必引入第二个函数，你要做的就是 $('input' ,'select').change (function() { setConfirmUnload(true);}
就第一个问题而言 - 当消息弹出时，有 2 个按钮“离开此页面”和“留在此页面上”，用户必须点击“留在此页面上” '，然后单击“提交”按钮。我想知道是否有一种方法可以将其更改为只需要单击一次（可能使用 jquery 对话框消息？）所以不是“留在此页面上”而是“提交按钮”？对于第二个问题 - 这看起来比我正在做的要好得多;-)
我尝试过使用 jQuery 模态消息，但我无法将它与函数 setConfirmUnload(on) {} 正确结合，因为每次更改字段时都会弹出模态消息

【解决方案2】：

这是一个棘手的情况。如果您提交表单，那么您的后退按钮的重定向将不起作用。如果您使用 href 重定向后退按钮单击，您的提交将无法正常工作，因为当单击功能工作时，您的下一页将加载。如何使用 jquery 触发 ajax 调用以将表单数据发送到服务器并在回调函数中将页面重定向到上一页？

有关如何执行此操作的详细信息，请查看此帖子：Submit form using AJAX and jQuery

【讨论】：

现在至少可以理解为什么它不起作用了 :-) 你介意告诉我怎么做吗？我对 ajax 不是很熟悉。
这里是您问题的答案：stackoverflow.com/questions/425095/…。
我似乎无法让该帖子中的代码正常工作。我碰巧正在使用第二个答案中提到的插件，但这只是做一个 INSERT 但不适用于 UPDATE 功能。你有没有机会告诉我如何用 AJAX 提交它？（我不需要验证表单）。
您能否详细解释一下插入正在工作而不更新是什么意思？解决方案是对服务器进行 POST，如果您想使用服务器上发布的数据进行 INSERT、UPDATE 或 DELETE，则由您决定。
我尝试了 Rfunduk 和 Darin 的解决方案。我无法让 Rfunduk 的代码工作。 Darin 的解决方案使用 jquery 表单插件来发布它，由于某种原因，该插件适用于我的 INSERT 语句，但不适用于我的 UPDATE 语句（这些语句在没有插件的情况下正常工作），所以我希望你能帮助我从 Rfunduk 的解决方案中获取代码工作。

【解决方案3】：

我通过将 HTML 中的所有必要链接更改为具有名称属性的提交按钮并在 PHP 中添加一条语句来根据用户单击的按钮重定向用户来解决此问题。

HTML

<input type="submit" name="whereto" value="BACK" />
<input type="submit" name="whereto" value="SUBMIT" />

PHP

// Insert Statement
if ($_POST['whereto'] == 'BACK') {
    header("location: form1.php");
} elseif ($_POST['whereto'] == 'SUBMIT') {
    header("location: form3.php");
}

【讨论】：