2014年1月11日 星期六

HTML 表單 reset 後,hidden 欄位的值是否會重設?

HTML 表單中的隱藏(hidden)欄位,使用 JavaScript 改變預設值之後
再按表單的 reset 按鈕時,
不同瀏覽器,有不同結果,有的會重設 hidden 欄位的值,有的則不會。

測試結果:
IE6、IE7、IE8 會將隱藏欄位的值重設為預設值,
IE9、IE10、IE11、Firefox、Chrome 則維持隱藏欄位改變後的值。

測試範例:
myHidden 是隱藏欄位,預設值為 "A",使用 JS 將值改變為 "B" 後,再按 reset
IE6、IE7、IE8 瀏覽器,myHidden 的值會變回 "A",
IE9、IE10、IE11、Firefox、Chrome 瀏覽器,myHidden 的值依然是 "B"
<form id="form1" name="form1" method="post" action="">
  <input name="myHidden" type="hidden" id="myHidden" value="A" />
  <input type="button" name="btnSet" value="設定隱藏欄位值" onclick="SetHiddenVal()" />
  <input type="reset" name="btnReset" value="重設" />
  <input type="button" name="btnGet" value="取得隱藏欄位值" onclick="GetHiddenVal()" />
</form>
<script type="text/javascript">
/* 設定隱藏欄位值 */
function SetHiddenVal()
{
    document.getElementById("myHidden").value = "B";
}

/* 取得隱藏欄位值 */
function GetHiddenVal()
{
    alert(document.getElementById("myHidden").value);
}
</script>

沒有留言:

張貼留言