為radio類(lèi)型的INPUT添加客戶(hù)端腳本(附加實(shí)現(xiàn)JS來(lái)禁用onClick事件思路代碼)
更新時(shí)間:2010年11月11日 15:21:50 作者:
為radio類(lèi)型的INPUT添加客戶(hù)端腳本(附加實(shí)現(xiàn)JS來(lái)禁用onClick事件思路代碼),需要的朋友可以參考下。
下面的例子將展示其結(jié)果是沒(méi)有重載顯示提交。
當(dāng)用戶(hù)選擇一個(gè)選項(xiàng)上面,一個(gè)函數(shù)叫做“getVote()”執(zhí)行。該功能所引發(fā)的“的OnClick”事件
<html>
<head>
<script type="text/javascript">
function getVote(int)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("poll").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","poll_vote.php?vote="+int,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="poll">
<h3>Do you like PHP and AJAX so far?</h3>
<form>
Yes:
<input type="radio" name="vote"value="0" onclick="getVote(this.value)" />
<br />No:
<input type="radio" name="vote"value="1" onclick="getVote(this.value)" />
</form>
</div>
</body>
</html>
The getVote() function does the following:
Create an XMLHttpRequest object
Create the function to be executed when the server response is ready
Send the request off to a file on the server
Notice that a parameter (vote) is added to the URL (with the value of the yes or no option)
判斷控件的disabled屬性是不是true,是的話return false;實(shí)現(xiàn)禁用radio的onclick事件并可再次啟用它
方法一:(同時(shí)實(shí)現(xiàn)禁用,重新啟用功能,只能針對(duì)button text類(lèi)型的INPUT,對(duì)div無(wú)法禁用其onclick事件)
<input type="button" value="A button. Click me to see the alert box." onclick="alert('I am clicked.');" id="cmd1" />
<br/>
<input type="button" value="Click me to disable the first button" onclick="document.getElementById('cmd1').disabled=true;" />
<br/>
方法二,三:(實(shí)現(xiàn)移除radio的onclick事件,需再次重新注冊(cè)事件,可以禁用div的onclick事件)
<input type="button" value="Click me to disable the onclick event on first button" onclick="document.getElementById('cmd1').onclick=function(){};" />
<br/>
三:
<input type="button" value="Click me to disable the onclick event on first button" onclick="document.getElementById('cmd1').onclick=null;" />
當(dāng)用戶(hù)選擇一個(gè)選項(xiàng)上面,一個(gè)函數(shù)叫做“getVote()”執(zhí)行。該功能所引發(fā)的“的OnClick”事件
復(fù)制代碼 代碼如下:
<html>
<head>
<script type="text/javascript">
function getVote(int)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("poll").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","poll_vote.php?vote="+int,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="poll">
<h3>Do you like PHP and AJAX so far?</h3>
<form>
Yes:
<input type="radio" name="vote"value="0" onclick="getVote(this.value)" />
<br />No:
<input type="radio" name="vote"value="1" onclick="getVote(this.value)" />
</form>
</div>
</body>
</html>
The getVote() function does the following:
Create an XMLHttpRequest object
Create the function to be executed when the server response is ready
Send the request off to a file on the server
Notice that a parameter (vote) is added to the URL (with the value of the yes or no option)
判斷控件的disabled屬性是不是true,是的話return false;實(shí)現(xiàn)禁用radio的onclick事件并可再次啟用它
方法一:(同時(shí)實(shí)現(xiàn)禁用,重新啟用功能,只能針對(duì)button text類(lèi)型的INPUT,對(duì)div無(wú)法禁用其onclick事件)
<input type="button" value="A button. Click me to see the alert box." onclick="alert('I am clicked.');" id="cmd1" />
<br/>
<input type="button" value="Click me to disable the first button" onclick="document.getElementById('cmd1').disabled=true;" />
<br/>
方法二,三:(實(shí)現(xiàn)移除radio的onclick事件,需再次重新注冊(cè)事件,可以禁用div的onclick事件)
<input type="button" value="Click me to disable the onclick event on first button" onclick="document.getElementById('cmd1').onclick=function(){};" />
<br/>
三:
<input type="button" value="Click me to disable the onclick event on first button" onclick="document.getElementById('cmd1').onclick=null;" />
您可能感興趣的文章:
- 怎么通過(guò)onclick事件獲取js函數(shù)返回值(代碼少)
- javascript 動(dòng)態(tài)改變onclick事件觸發(fā)函數(shù)代碼
- 詳解js的事件處理函數(shù)和動(dòng)態(tài)創(chuàng)建html標(biāo)記方法
- JavaScript利用發(fā)布訂閱模式編寫(xiě)事件監(jiān)聽(tīng)函數(shù)
- ES6中javascript實(shí)現(xiàn)函數(shù)綁定及類(lèi)的事件綁定功能詳解
- JavaScript觸發(fā)onScroll事件的函數(shù)節(jié)流詳解
- 深入理解Node.js 事件循環(huán)和回調(diào)函數(shù)
- 實(shí)例講解javascript注冊(cè)事件處理函數(shù)
- js動(dòng)態(tài)添加input按鈕并給按鈕增加onclick的函數(shù)事件(帶參數(shù))完整實(shí)例
相關(guān)文章
java編程自寫(xiě)一款JavaScript超實(shí)用表格插件
這篇文章主要為大家介紹了用java編程來(lái)寫(xiě)一款JavaScript表格插件,非常的使用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2021-10-10
鼠標(biāo)經(jīng)過(guò)的文本框textbox變色
文本框 textbox 變色2009-05-05
沒(méi)有form表單情況下敲回車(chē)鍵提交表單的js代碼
原來(lái)文章是jsp下,其實(shí)應(yīng)用了js的代碼,大家可以參考下,其實(shí)各個(gè)語(yǔ)言的原理都一樣,如果使用了ajax嚴(yán)重就完美的客戶(hù)端驗(yàn)證了。2009-09-09

