是否可以使用後退按鈕保留表單選項？

用戶可以選擇一個單選按鈕，並根據所選的單選按鈕，輸入字段可顯示詢問額外信息。用戶提交表單;然後說他們需要回去改變形式。當他們回去時，輸入字段不再顯示，但選擇了正確的單選按鈕。是否可以使用後退按鈕保留表單選項？

答案只需要在IE8 +中工作。將jQuery作爲解決方案的一部分也是一種選擇。

- ==使用jQuery插件simsalabim ==已更新7/31/2012 -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 

<!---<script src="sisyphus.min.js"></script>---> 
<script type="text/javascript" src="https://raw.github.com/simsalabim/sisyphus/master/sisyphus.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $('#form1').sisyphus(); 
}); 
</script> 
</head> 

<body> 
<script> 
    function ToggleColorOptions(el) { 
    if (el == 'Std') 
      { 
     $('#Option1').show(); 
     $('#Option2').hide(); 
    } 
     else if (el == 'Non') 
      { 
       $('#Option1').hide(); 
       $('#Option2').show(); 
      } 
     } 
</script> 

<form id="form1" action="myTesta.cfm" method="post"> 
<input name="StdRNonStdOption" type="radio" id="StdRNonStdOption_std" onclick="ToggleColorOptions('Std');" value="Std" /> 
Standard <br /> 
<input name="StdRNonStdOption" type="radio" id="StdRNonStdOption_non" onclick="ToggleColorOptions('Non');" value="Non" /> 
Non-Standard <br /> 

<div id="Option1" style="display:none;"> 
    <select name="ThisColor" > 
     <option></option> 
     <option>Blue</option> 
     <option>Green</option> 
    </select> 
</div> 
<div id="Option2" style="display:none;"> 
    <input name="ThisColor" type="text" size="20" maxlength="51" /> 
</div> 
<input type="submit" value="Save" />

來源

2012-07-27 HPWD

您的解決方案中的JQuery：

請輸入型按鈕

將擴展的onclick選項放在帶類名的div中someexpandedoptions

上的click事件觸發的知名度

$('.someexpandedoptions').css('display','inline'); 

$('.someexpandedoptions').css('display','none');

就這麼簡單。

只要確保正確初始化您的按鈕。

來源

2012-07-27 17:31:23 Pinch

您的解決方案似乎更用於切換輸入框的顯示......是我錯了？ – HPWD 2012-07-27 18:00:06

我認爲這很大程度上取決於瀏覽器在提交表單之前如何記住表單某些瀏覽器有，有些不這樣......並且在表單提交後沒有簡單的方法讓他們記住...... 例如， firefox在記憶方面表現不錯...但IE瀏覽器並沒有...查看歷史API，客戶端本地存儲尋求答案 – jsshah 2012-07-27 18:04:39

使用像西西弗斯這樣的類似gmail的客戶端localStorage插件。可能是你最好的選擇...

http://simsalabim.github.com/sisyphus/

來源

2012-07-30 16:50:57

這對於保留選定的值非常有用，但它不記得應隱藏或顯示哪些元素。 :( – HPWD 2012-07-31 15:49:34

我提供了一些示例代碼，使用您引用的插件。 – HPWD 2012-07-31 15:53:52

是否可以使用後退按鈕保留表單選項？

回答

相關問題