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">'; 
    } 
?>