在使用 JavaScript 重定向到另一個頁面之前提交表單

Question

我有一個復雜的表格； 在其中還有一個“添加更多項目”鏈接，可將用戶帶到另一個表單頁面（獨立）。 目前發生的情況是，當他們編輯主表單而不保存它並且他們 go 到獨立表單時，當他們返回主表單頁面時，他們已經丟失了編輯。

<form id="form_1">

[...]
<a href="/add-something-else/">Add something else.</a>

<input type='submit'/>
</form>

添加其他頁面：

<form id="form_2">
<input type='submit'/ onsubmit='go_back_to_form_1'>
</form>

將所有內容保存在 sessionStorage 中將是矯枉過正（我認為），並且像 FormPersistence.js 這樣的腳本會與我表單的其他功能（即 Django 表單集）混淆。 我試圖通過將此 function 附加到我的“添加其他內容”按鈕來實現我想要的：

$.when(document.forms["form1"].submit()).then(function(){
    window.location.pathname = '/add-something-esle/'
})

但是，由於某些原因，當我 go 回到 form1 時，我看到表單沒有保存。 我怎樣才能達到我想要的？

Answer 1

整頁重新加載清除所有表格 state。 您需要一種方法在整頁重新加載之間保留 state。 您可以為此使用sessionStorage 。

Answer 2

<form>由輸入元素組成，您可以將所有<input.../>持久化到會話/本地存儲並在頁面重新加載時將它們全部恢復； 我記得以前回答過類似的問題； 但這是該答案的摘要：

基本上你在你想要的輸入元素上設置一個事件監聽器（即查詢選擇器）； 確保它們具有唯一的id （或類似的東西），因為我們將使用它作為存儲值的鍵；

這是一個例子：

function persist(event) {
  // `id` is used here
  sessionStorage.setItem(event.target.id, event.target.value);
}

// you may use a more specific selector;
document.querySelectorAll("form input").forEach((formInput) => {
  // `id` also used here for restoring value
  formInput.value = localStorage.getItem(formInput.id);
  formInput.addEventListener("change", persist);
});

此代碼段會將所有<form>標簽的input值保存到 session 存儲中； 您還可以在.querySelectorAll()中使用更專業的選擇器來滿足您的需要