如何在用户提交表单后(即在表单处理期间),防止用户离开页面?

3

这里有很多类似的问题,但我没有找到任何一个处理在提交表单(即在其处理期间)后阻止用户离开页面的方法。

我在我的网站上有一个页面,其中包含一个需要长时间提交的表单(有时长达15秒),因此我想要弹出警告来在用户提交表单后让他们留在页面上。

问题是,无论我如何尝试使用 window.onbeforeunload,当表单被提交时,我总是从该函数得到一个确认对话框,这不是我想要的。我不希望用户在提交表单时得到确认对话框,而是在提交后并且只有在他们尝试离开页面时才会得到该对话框。

HTML:

<form id="myform" method="post" action="" onsubmit="formSubmitted();">
    <button type="submit" onclick="return checkForm();">submit form</button>
</form>

Javascript:

formSubmittedFlag = 0;

function checkForm()
{
    ...

    if(...)
    {
        return true;
    }
    else
    {
        return false;
    }
}


function formSubmitted()
{
    formSubmittedFlag = 1;
}



window.onbeforeunload = function()
{
    if(formSubmittedFlag == 1)
    {
        return "Are you sure you want to leave the page?";
    }
}

有没有一种方法可以实现我想要的内容?

2
你意识到你有一个变量和一个同名的函数吗? - Musa
@Musa - 这只是我真实代码的简化版本,其中函数和变量名称是不同的。但我很高兴你指出了这一点,因为我没有意识到这是一个问题。 - Nate
1
为什么要阻止用户关闭选项卡?请求已经发送到您的服务器,会被正确处理。如果用户不想等待反馈,他应该可以这样做。 - Bergi
@Bergi - 这是一个结账页面,所以用户需要留在页面上查看是否有订单处理错误。我不认为任何用户会有意离开页面,所以这是我试图保护用户免受在提交表单后意外关闭页面的影响。 - Nate
1
提交表单时,除非您使用ajax发送表单内容,否则会卸载页面。您需要在接收表单的结果页面中包含防止此情况发生的代码。 - Bergi
2个回答

2
使用AJAX提交表单,而不是使用表单内置的动作。可以使用jQuery Form插件来帮助实现。

1
将formSubmitted的内容替换为以下内容:
sessionStorage.formSubmittedFlag=true;
notReloaded=true;

并将window.onbeforeunload的内容替换为以下内容:

    if(sessionStorage.formSubmittedFlag===true&&notReloaded!=true)
        return 'do you want to leave?';

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接