当前位置：文江博客话题详情

onunload - 检查表单是否已提交

发布于 2024-09-07 13:15:45 字数 151 浏览 3 评论 0原文

我的网页上有一个表单。当用户离开该页面时，我想检查表单是否已提交。如果是，则用户只需继续进入下一页，如果不是，则用户会收到一条警报消息，并返回到表单所在的原始页面。

我对 javascript 不太熟悉，所以如果可能的话，我希望能提供一些代码片段？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你げ笑在眉眼 2024-09-14 13:15:45

你的问题有点模糊。您的问题意味着您正在异步提交表单，但您说您不熟悉 JavaScript。异步提交表单需要 JS 知识。另外，如果您实际上同步提交表单，那么解决方案就太明显了（只需在服务器端有条件地渲染一些 JS 即可）。

如果您实际上是异步提交表单，那么只需在成功提交表单后在表单的 data-xxx 属性中设置一些令牌/切换即可。例如

function submit(form) {
    // Do your thing to submit it.

    // And then on succes:
    form['data-submitted'] = true;
    return false;
}

，然后，在 beforeunload 事件期间，您只需检查令牌/切换是否存在，如果丢失，则相应地返回消息。

window.onbeforeunload = function() {
    for (var i = 0; i < document.forms.length; i++) {
        var form = document.forms[i];
        if (form['data-submitted'] != 'undefined' && !form['data-submitted']) {
            return "There is unsaved data!";
        }
    }
}

请注意，您不能为此使用 unload 事件，因为为时已晚，无法保持页面打开。

更新：因此表单同步提交。好吧，无论你使用什么服务器端语言，只要让它在表单未提交时有条件地渲染一个 JS window.onbeforeunload 调用即可（你显然已经知道表单何时提交，否则怎么办？你能处理吗？;))。您还需要在即将提交表单时禁用 window.onbeforeunload 调用。

根据您的问题历史记录，我打赌您了解 PHP，因此这里有一个针对 PHP 的启动示例：

<?php
    if (!$form_is_submitted) {
        echo '<script>window.onbeforeunload = function() { return "There is unsaved data!"; }</script>';
        echo '<form onsubmit="window.onbeforeunload=null">';
    }
?>

Your question is a bit vague. Your question implies that you're submitting the form asynchronously, but you said that you aren't familiar with JavaScript. Submitting a form asynchronously requires JS knowledge. Also, if you're actually submitting the form synchronously, the solution would have been too obvious (just render some JS conditionally on the server side).

If you're actually submitting the form asynchronously, then just set some token/toggle in as form's data-xxx attribute after the succesful form submit. E.g.

function submit(form) {
    // Do your thing to submit it.

    // And then on succes:
    form['data-submitted'] = true;
    return false;
}

Then, during beforeunload event you just check if the token/toggle is there and in case it's missing, return the message accordingly.

window.onbeforeunload = function() {
    for (var i = 0; i < document.forms.length; i++) {
        var form = document.forms[i];
        if (form['data-submitted'] != 'undefined' && !form['data-submitted']) {
            return "There is unsaved data!";
        }
    }
}

Note that you can't use unload event for this since it too late then to keep the page open.

Update: so the form is submitted synchronously. Okay, whatever server side language you're using, just let it conditionally render a JS window.onbeforeunload call when the form is not submitted (you obviously already know when the form is been submitted, how else would you be able to process it? ;) ). You also need to disable the window.onbeforeunload call when the form is about to be submitted.

Based on your question history I bet that you know PHP, so here's a PHP targeted kickoff example:

<?php
    if (!$form_is_submitted) {
        echo '<script>window.onbeforeunload = function() { return "There is unsaved data!"; }</script>';
        echo '<form onsubmit="window.onbeforeunload=null">';
    }
?>

回复收藏 0 原文

~没有更多了~