快捷導(dǎo)航

Web表單提交之disabled問題js解決方法

更新時(shí)間：2015年01月13日 15:02:01 投稿：shichen2014

這篇文章主要介紹了Web表單提交之disabled問題js解決方法,分析了通過js解決保存值也能保留用戶不能輸入的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了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>

當(dāng)我們提交表單時(shí)，在后臺(tái)是獲取不了pname數(shù)據(jù)的，因?yàn)樵撦斎肟虻膶傩詃isabled。即能保存值也能保留用戶不能輸入這種功能有以下解決方法：

1. 將disabled="disabled"屬性改為readonly="readonly"代替，其功能是基本一樣，readonly還能支持onfocus事件。（推薦使用）

復(fù)制代碼代碼如下:

2. 在form表單提交時(shí)利用js將disabled屬性修改

復(fù)制代碼代碼如下:

<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>

3. 將pname的值用js獲取，使用參數(shù)形式傳遞，修改form的action值,當(dāng)然這樣需要修改后臺(tái)代碼，獲取該參數(shù)（getParameter）；

復(fù)制代碼代碼如下:

<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>

一點(diǎn)小建議：當(dāng)我們書寫腳本語(yǔ)言時(shí)，我們一般熱衷于jQuery書寫，因?yàn)樗芎?jiǎn)煉，jQuery是將javascript封裝的，取HTML等值時(shí)，采用正則表達(dá)式匹配獲取，
因此必然影響效率，所以建議大家當(dāng)有大量腳本時(shí)，一般采用javascript。

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS window對(duì)象的top、parent、opener含義介紹
本文為大家介紹下JS window對(duì)象的top、parent、opener含義，不了解的朋友可以參考下，希望對(duì)大家有所幫助
2013-12-12
基于JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加刪除表格的行
又一個(gè)動(dòng)態(tài)控制表格的效果，用JavaScript動(dòng)態(tài)生成表格行、表格列，以及還可動(dòng)態(tài)刪除這些行列，行等，運(yùn)行代碼后，點(diǎn)擊對(duì)應(yīng)的功能按鈕，即可實(shí)現(xiàn)對(duì)應(yīng)的表格操作功能，接下來(lái)通過代碼實(shí)例給大家介紹JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加刪除表格的行，需要的朋友參考下
2016-02-02
微信小程序記住密碼的功能簡(jiǎn)單幾步實(shí)現(xiàn)
軟件中的“記住密碼”選框不知道大家平時(shí)會(huì)不會(huì)勾選，反正對(duì)于一個(gè)重度懶癌患者的我來(lái)說就沒有不勾選的時(shí)候，畢竟隔一段時(shí)間就重新輸入一遍難記又難輸?shù)馁~號(hào)密碼，想想就讓人頭皮發(fā)麻。今天教大家用代碼在微信小程序中實(shí)現(xiàn)這個(gè)簡(jiǎn)單的小功能
2023-01-01
javascript 字符 Escape,encodeURI,encodeURIComponent
下面是對(duì)字符串編碼轉(zhuǎn)換功能函數(shù)大家，大家可以根據(jù)實(shí)際需要選擇使用。
2009-07-07
Webpack的Loader和Plugin的區(qū)別
這篇文章主要介紹了Webpack的Loader和Plugin的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
細(xì)說webpack源碼之compile流程-入口函數(shù)run
Webpack 是一個(gè)前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源。這篇文章主要介紹了webpack源碼之compile流程-入口函數(shù)run,需要的朋友可以參考下
2017-12-12
仿YAHOO的一個(gè)小效果下拉效果
[紅色]仿YAHOO的一個(gè)小效果下拉效果...
2006-11-11
Ajax請(qǐng)求時(shí)無(wú)法重定向的問題解決代碼詳解
這篇文章主要介紹了Ajax請(qǐng)求時(shí)無(wú)法重定向的問題解決代碼詳解，當(dāng)使用Ajax請(qǐng)求時(shí)，如果后臺(tái)進(jìn)行重定向到其他頁(yè)面時(shí)是無(wú)法成功的，只能在瀏覽器地址欄輸入才能夠?qū)崿F(xiàn)重定向。下面我們來(lái)看看解決方法吧
2019-06-06
Js自動(dòng)截取字符串長(zhǎng)度,添加省略號(hào)(……)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇Js自動(dòng)截取字符串長(zhǎng)度,添加省略號(hào)(……)的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-03-03
判斷checkbox選擇的個(gè)數(shù) 多瀏覽器
判斷checkbox選擇的個(gè)數(shù) 多瀏覽器...
2006-09-09