JavaScript的改變複選框狀態在用戶體驗上提交表單

編輯注意前...JavaScript的改變複選框狀態在用戶體驗上提交表單

第一評論後，我想指出的是，每次提交導致一個POST /重定向/ GET，走用戶轉到新頁面。這實際上是一個非常愉快的用戶體驗：不要誤解，當用戶到達下一頁時，他會看到他的複選框被選中。然後，如果他點擊後退按鈕，他會看到他的上一頁，就像在複選框被選中之前一樣。用戶從不會注意到他的複選框會改變它的狀態，因爲他立即進入了一個新頁面：我正在使用Post/redirect/GET ...

我有一個webapp，它很好地與後退按鈕並尊重後退按鈕。不過，我有一個問題。正如評論說，有很多代表在這裏用戶，顯然，該複選框被重置爲它們的最終狀態的事實是瀏覽器的功能（不是所有的人都認爲說）：

Yet another checkbox/backbutton issue

所以我嗯想一個解決方法，這個問題是不是與上述問題相同。這個問題是關於如何從JavaScript專門做以下事情。

目前，我有很簡單的複選框，即盡一切看起來是這樣的：

<input type="checkbox" name="collapseFolds" value="na" checked onchange="document.getElementById('someid').submit()>

現在可以我怎樣才能在onchange處理：

設置另外一個元素（例如某些隱藏元素）設置爲複選框的值（至少爲「已選中」或「未選中」）
將複選框設置回原來的值礦石被點擊（所以無論是「檢查」，如果用戶只是選中它，或沒有，如果用戶只是檢查了它）
提交

我的理由是，如果我能做到這一點，我可以簡單地解決我在另一個問題中描述的問題，這不是太花哨：我只需要檢查隱藏參數的值而不是檢查複選框的值。

那麼會發生什麼，會是以下幾點：上一個複選框

用戶點擊，切換它的狀態
平變化攔截此，設置一個隱藏的價值的複選框的狀態
變回複選框以原始狀態
提交

這樣，如果用戶點擊了回來，但噸，他被採取不是最後的狀態複選框是在，但到原來的狀態。

理想情況下，它應該適用於每個瀏覽器（我甚至不知道我的onchange是否足夠好）。

這是唯一的。js我已經在這些頁面上，所以我寧願不必使用JQuery，但如果JQuery是這樣，那麼就這樣吧...

P.S.：請注意整個網頁在服務器端生成，但沒有AJAX進行。它只是簡單地POST/GET並在用戶點擊複選框時提交。

來源

2012-03-16 Cedric Martin

聽起來像一個非常奇怪的用戶體驗。 – Mathletics 2012-03-16 18:59:55

@Mathletics：爲什麼？每個頁面都是「無狀態的」，並且對應於一個唯一的URL。這實際上是一種**非常令人愉快的用戶體驗：當用戶到達**下一個**頁面時，他看到自己的複選框已被選中，所以不要弄錯。然後，如果他點擊後退按鈕，他會看到他的上一頁，就像在複選框被選中之前一樣。用戶從不會注意到他的複選框會改變它的狀態，因爲他立即進入了一個新頁面：我正在使用Post/redirect/GET ... – 2012-03-16 19:02:30

@Cedric ...我的解決方案可能不適用於IE（8 & 9）....除此之外，它工作得很好。有關IE 8和IE 9的問題我提出this如果由於某種原因，它工作在IE 8/9請讓我知道:)

<input type="checkbox" name="collapseFolds" value="na" checked onchange="document.getElementById('someid').submit()">

而是寫作在線onchange你可能想保留html和javascript獨立以便日後維護。

，因此您可以更改您的代碼：

HTML：

<input type="checkbox" name="collapseFolds" value="na" checked >

的Javascript：

function submitThisFormOnCheckBoxClick(event){ 
    event.preventDefault(); // This will ensure that history will be taken care of 
    var form = document.getElementById("formId"); 
    form.submit(); 
} 

var collapsefolds = document.getElementsByTagName("collapseFolds"); 

for (var el in collapsefolds){ 

    if (el.addEventListener) { // for non-IE browsers 
    el.addEventListener('change', modifyText, false); 
    } else if (el.attachEvent) { // for IE based browsers 
    el.attachEvent('change', modifyText); 
    } 
}

讓我知道如果您有任何問題。

來源

2014-03-02 21:49:09 Vikram

JavaScript的改變複選框狀態在用戶體驗上提交表單

回答

相關問題