Web表單提交之disabled問題js解決方法
更新時間:2015年01月13日 15:02:01 投稿:shichen2014
這篇文章主要介紹了Web表單提交之disabled問題js解決方法,分析了通過js解決保存值也能保留用戶不能輸入的功能,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了Web表單提交之disabled問題js解決方法。分享給大家供大家參考。具體分析如下:
例如,有如下表單
復制代碼 代碼如下:
<form id="inputForm" action="shorttermrental.action" method="post">
<input name="pname" type="text" id="pname" value="xxx" size="20" disabled="disabled"/>
<input name="but" type="submit" id="but" value="xxx" size="20"/>
</form>
<input name="pname" type="text" id="pname" value="xxx" size="20" disabled="disabled"/>
<input name="but" type="submit" id="but" value="xxx" size="20"/>
</form>
當我們提交表單時,在后臺是獲取不了pname數(shù)據(jù)的,因為該輸入框的屬性disabled。即能保存值也能保留用戶不能輸入這種功能有以下解決方法:
1. 將disabled="disabled"屬性改為readonly="readonly"代替,其功能是基本一樣,readonly還能支持onfocus事件。(推薦使用)
復制代碼 代碼如下:
<input name="xxx" id="xxx" value="xxx" size="20" readonly="readonly"/>
2. 在form表單提交時利用js將disabled屬性修改
復制代碼 代碼如下:
<input name="but" type="button" id="but" value="xxx" size="20"/>
<script type="text/javascript">
function submit_form(){
//javascript寫法
document.getElementById("pname").disabled="";
document.getElementById("inputForm").submit();
//jQuery寫法
$("#pname").attr("disabled",false);
$("#inputForm").submit();
}
</script>
<script type="text/javascript">
function submit_form(){
//javascript寫法
document.getElementById("pname").disabled="";
document.getElementById("inputForm").submit();
//jQuery寫法
$("#pname").attr("disabled",false);
$("#inputForm").submit();
}
</script>
3. 將pname的值用js獲取,使用參數(shù)形式傳遞,修改form的action值,當然這樣需要修改后臺代碼,獲取該參數(shù)(getParameter);
復制代碼 代碼如下:
<script type="text/javascript">
function submit_form(){
//jQuery寫法
var pname = $("#pname").val();
$("#inputForm").attr("action","shorttermrental.action?panme="+pname+"&p="+new Date());
$("#inputForm").submit();
//javascript寫法
var pname = document.getElementById("pname").value;
document.getElementById("pname").action = "shorttermrental.action?panme="+pname+"&p="+new Date();
document.getElementById("pname").submit();
}
</script>
function submit_form(){
//jQuery寫法
var pname = $("#pname").val();
$("#inputForm").attr("action","shorttermrental.action?panme="+pname+"&p="+new Date());
$("#inputForm").submit();
//javascript寫法
var pname = document.getElementById("pname").value;
document.getElementById("pname").action = "shorttermrental.action?panme="+pname+"&p="+new Date();
document.getElementById("pname").submit();
}
</script>
一點小建議:當我們書寫腳本語言時,我們一般熱衷于jQuery書寫,因為它很簡煉,jQuery是將javascript封裝的,取HTML等值時,采用正則表達式匹配獲取,
因此必然影響效率,所以建議大家當有大量腳本時,一般采用javascript。
希望本文所述對大家的javascript程序設計有所幫助。
您可能感興趣的文章:
- 如何使用JavaScript和正則表達式進行數(shù)據(jù)驗證
- Javascript級聯(lián)下拉菜單以及AJAX數(shù)據(jù)驗證核心代碼
- asp.net中JavaScript數(shù)據(jù)驗證實現(xiàn)代碼
- js數(shù)據(jù)驗證集合、js email驗證、js url驗證、js長度驗證、js數(shù)字驗證等簡單封裝
- JavaScript判斷表單提交時哪個radio按鈕被選中的方法
- JS定義網(wǎng)頁表單提交(submit)的方法
- javascript 回車鍵觸發(fā)表單提交的問題
- 符合標準的js表單提交的代碼
- 可實現(xiàn)多表單提交的javascript函數(shù)
- 表單提交時自動復制內(nèi)容到剪貼板的js代碼
- 基于JavaScript實現(xiàn)帶數(shù)據(jù)驗證和復選框的表單提交
相關文章
JavaScript中window和document用法詳解
這篇文章主要介紹了JavaScript中window和document用法詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-07-07javascript 實現(xiàn)雙擊才能打開鏈接的方法
javascript 實現(xiàn)雙擊才能打開鏈接的方法...2007-08-08JavaScript中有關一個數(shù)組中最大值和最小值及它們的下表的輸出的解決辦法
這篇文章主要介紹了JavaScript中有關一個數(shù)組中最大值和最小值及它們的下表的輸出的一種解決辦法,本文還給大家介紹了js快速獲取數(shù)組中最大值和最小值的方法,非常不錯,需要的朋友可以參考下2016-07-07JavaScript實現(xiàn)獲取圖片文件真實格式的示例代碼
每種格式的圖片,都有自己特有的優(yōu)缺點以及數(shù)據(jù)結構,本篇博文的目的就是基于不同格式的圖像二進制數(shù)據(jù),獲取到圖片的真實格式,感興趣的可以了解一下2023-02-02