disabled屬性對form表單向後臺傳值的影響

轉自:http://blog.csdn.net/qq_38141890/article/details/70080936


近日,在對頁面一個字段設置爲不可修改時,想到用 disabled 屬性,可是在使用之後發現後臺無法獲取該字段的值。

  <tr>
    <td align="right">臨時工位編號:</td>
    <td>&nbsp;<input type="text" name="lsgwbh" value="${userInfo.lsgwbh }"disabled="disabled"/> </td>
  </tr>


  於是搜到了下面的一段(摘抄網上,csdn博主:有名字咧):  


      在form表單裏,如果對input加入disabled="disabled"或disabled="true"等屬性,form表單提交的時候,就不會傳值到後臺。

    原因:在HTML頁面的某元素加入了disable的屬性,那麼這個元素只是單單的去給用戶去顯示,當表單提交時,這個元素不會提交給後臺去處理.所以當元素加入了disabled屬性,後臺是無法得到這個屬性的值.

    解決方法:再寫一個隱藏屬性,一個用於顯示,一個用於傳值。

   

按照以上思路修改後代碼如下:

  <tr>
    <td align="right">臨時工位編號:</td>
    <td>&nbsp;<input type="text" name="lsgwbh" value="${userInfo.lsgwbh }" disabled="disabled"/> </td>
  </tr>
  <tr hidden="true">
     <td align="right">臨時工位編號:</td>
     <td>&nbsp;<input type="text" name="lsgwbh" value="${userInfo.lsgwbh }" /> </td>
  </tr>

偶然又看到了一篇文章,建議使用 readonly 來代替 disabled 屬性,實現同樣的效果。修改發現確實可以。


現在來總結 disabled 和 readonly 的區別:(摘抄網上) 

  1. readonly是要鎖定這個控件,通過在界面上無法修改他(但是通過javascript可以修改他)。
  2. disabled和readonly有相同的地方也是可以鎖定這個控件用戶不能改變他的值,但是disabled的更徹底一些,他是要使你完全不能使用他,包括改變他的背景顏色,如果是checkbox則不能選中他。
  3. 所有控件都有disabled 屬性,但是不一定有readonly屬性,如select 下拉框。點擊被readonly掉的按鈕照樣可以觸發事件,但是被disabled掉的按鈕就無法使用了不管上面有沒有事件。將div設置disabled屬性之後,整個div都灰掉了,但是文本框裏面還是可以輸入內容的。注意:select下拉選擇框是沒有readonly屬性的。

 一般比較常用的情況是:

  • 在某個表單中爲用戶預填了某個唯一識別代碼,不允許用戶改動,但是在提交時需要傳遞該值,此時應該將它的屬性設置爲readonly。
  • 經常遇到當用戶正式提交了表單後需要等待管理員的信息驗證,這就不允許用戶再更改表單中的數據,而是隻能夠查看,由於disabled的作用元素範圍大,所以此時應該使用disabled,但同時應該注意的是要將submit button也disabled掉,否則只要用戶按了這個按鈕,如果在數據庫操作頁面中沒有做完整性檢測的話,數據庫中的值就會被清除。 如果說在這種情況下用readonly來代替disabled的話,若表單中只有input(text/password)和textarea元素,那還是可以的,如果存在其他發元素,比如select,用戶可以在重新改寫值後按回車鍵進行提交(回車是默認的submit觸發按鍵)。
  • 我們常常在用戶按了提交按鈕後,利用javascript將提交按鈕disabled掉,這樣可以防止網絡條件比較差的環境下,用戶反覆點提交按鈕導致數據冗餘地存入數據庫。

小技巧:diabled可用readonly代替,background-color:#cccccc;加上灰色背景色就可以。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章