onunload - 检查表单是否已提交

Question

我在网页上有一个表单，当用户从该页面移动时，我想检查表单是否已提交。如果是，那么用户只是继续到下一页，如果没有，用户收到警报消息并返回到表单所在的原始页面。

我对JavaScript不太熟悉，所以如果可能的话，我将不胜感激一些代码片段？

GF

Answer 1

您的问题有点含糊。你的问题意味着你在异步提交表单，但是你说你不熟悉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">'; 
    } 
?>