js 表单

最新推荐文章于 2022-05-26 18:17:08 发布
最新推荐文章于 2022-05-26 18:17:08 发布
阅读量516 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/anlukun/article/details/8918138
版权 
1.	document.getElementById("控件ID").disabled=true;  不可编辑状态 , document.getElementById("控件ID").disabled=false; 可编辑状态
案例:第一种:
<html>
<head><title>点击按钮表单无法再编辑</title></head>
<body>
<form action="" method="POST">
	<input type="text" name="test" id="test"/>
	<input type="button" name="button" id="button" οnclick="form.test.disabled=true;" value="提交"/>
</form>
</body>
</html>
第二种:
<html>
<head><title>点击按钮表单无法再编辑</title>
<script>
function abc(){
	document.getElementById("demo1").disabled=true;
}
</script>
</head>
<body>
<form action="" method="POST">
	<input type="text" name="username" id="demo1"/>
	<input type="button" name="name" οnclick="abc('demo1')" value="register"/>
</form>
</body>
</html>
html 的  input标签readonly属性
<form action="form_action.asp" method="get">
  Name:<input type="text" name="email" />
  Country:<input type="text" name="country" value="China" readonly="readonly" />
  <input type="submit" value="Submit" />
</form>
禁止和用户编辑和再编辑
<html>
<head><title>点击按钮表单禁止编辑和再编辑</title>


</head>
<body>
<form action="" method="POST">
	<input type="text" name="name" id="name" />
	<input type="checkbox" name= "" id="edit"  οnclick="test('name')" >
</form>
<script>
function test(){
	//alert("123");
	if(document.getElementById('edit').checked){
		document.getElementById("name").disabled=true;
	}else{
		document.getElementById("name").disabled=false;
	}
}
</script>
</body>
</html>
——————————————————————————————————————————
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>


</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
   function setRowColor(oCheck)
   {
      var oTr = oCheck.parentNode.parentNode;
      //alert(oCheck.checked);
	  if (oCheck.checked)
	  {
	    
		 if (oTr)
		 {
		    oTr.style.backgroundColor='yellow';
		 }
	  }else
	  {
         if (oTr)
		 {
		    oTr.style.backgroundColor='white';
		 }
	  }
	
   }


   function init()
   {
      var oTable = document.getElementById("GridView1");
	  if (oTable)
	  {
	     var oTrs = oTable.getElementsByTagName("tr");
		 for(var i=1;i<oTrs.length;i++)
		 {
		     oTrs[i].οnmοuseοver=function(){
			    this.style.backgroundColor='yellow';
			 }
			 oTrs[i].οnmοuseοut=function(){
			    this.style.backgroundColor='white';
			 }
		 }
	  }
   }
//-->
</SCRIPT>


</head>
<body οnlοad="init()">
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>


<div>


	<input type="hidden" name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" value="" />
</div>
    <div>
    
        <div>
	<table cellspacing="0" cellpadding="4" rules="all" border="1" id="GridView1" style="background-color:White;border-color:#CC9966;border-width:1px;border-style:None;border-collapse:collapse;">
		<tr style="color:#FFFFCC;background-color:#990000;font-weight:bold;">
			<th scope="col">
                        <input ID="chkAll" type="checkbox" />
                    </th><th scope="col">Au_Id</th><th scope="col">Au_Lname</th><th scope="col">Au_Fname</th><th scope="col">Phone</th><th scope="col">Addr</th><th scope="col">City</th><th scope="col">State</th><th scope="col">Zip</th>
		</tr><tr style="color:#330099;background-color:White;">
			<td>
                        <input ID="chkID" type="checkbox" οnclick="setRowColor(this)" />
                    </td><td>341-22-1782</td><td>ddddd</td><td>Meander</td><td>913 843-0462</td><td>10 Mississippi Dr.</td><td>Lawrence</td><td>KS</td><td>66044</td>
		</tr><tr style="color:#330099;background-color:White;">
			<td>
                        <input ID="chkID" type="checkbox"  οnclick="setRowColor(this)"/>
                    </td><td>472-27-2349</td><td>Gringlesby</td><td>Burt</td><td>707 938-6445</td><td>PO Box 792</td><td>Covelo</td><td>CA</td><td>95428</td>
		</tr><tr style="color:#330099;background-color:White;">
			<td>
                        <input ID="chkID" type="checkbox"  οnclick="setRowColor(this)" />
                    </td><td>486-29-1786</td><td>Locksley</td><td>Charlene</td><td>415 585-4620</td><td>18 Broadway Av.</td><td>San Francisco</td><td>CA</td><td>94130</td>
		</tr><tr style="color:#330099;background-color:White;">
			<td>
                        <input ID="chkID" type="checkbox"   οnclick="setRowColor(this)"/>
                    </td><td>672-71-3249</td><td>fff</td><td>eee</td><td>11111       </td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
		</tr><tr style="color:#330099;background-color:White;">
			<td>
                        <input ID="chkID" type="checkbox"   οnclick="setRowColor(this)"/>
                    </td><td>dfdf</td><td>dff</td><td>bbb</td><td>11111       </td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
		</tr><tr style="color:#330099;background-color:White;">
			<td>
                        <input ID="chkID" type="checkbox"  οnclick="setRowColor(this)" />
                    </td><td>ddd</td><td>fff</td><td>dffd</td><td>11111       </td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
		</tr><tr style="color:#330099;background-color:White;">
			<td>
                        <input ID="chkID" type="checkbox"  οnclick="setRowColor(this)" />
                    </td><td>dfdf</td><td>dfdfd</td><td>dffdf</td><td>11111       </td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
		</tr><tr style="color:#330099;background-color:White;">
			<td>
                        <input ID="chkID" type="checkbox"  οnclick="setRowColor(this)" />
                    </td><td>aaaaaaaa</td><td>aaaa</td><td>fddfd</td><td>11111       </td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
		</tr><tr style="color:#330099;background-color:White;">
			<td>
                        <input ID="chkID" type="checkbox"  οnclick="setRowColor(this)"/>
                    </td><td>cccccc</td><td>ffff</td><td>rrr</td><td>11111       </td><td>gggg</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
		</tr>
	</table>
</div>
        
    
    </div>
    </form>
</body>
</html>
平凡的Mac
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript的document对象的学习
l118
02-06 180
document的概念 浏览器对外提供的支持js的用来操作HTML文档的一个对象，此对象封存HTML文档的所有信息 使用document对象 获取HTML元素对象 直接获取： ①通过id方式 function testGetElementById() { var inp= window.document.getElementById("uname"); ale...
js设置按钮可用与不可用
Antg的博客
07-25 4325
一、js原生 按钮可用： document.getElementById(“按钮id”).attr(“disabled”,true); 按钮不可用： document.getElementById(“按钮id”).attr(“disabled”,false); 二、jq 按钮可用： $("#按钮id").attr(“disabled”,true); 按钮不可用： $("#按钮id").attr(“disabled”,true); ...
document.getElementById(“XXX“).disabled=““；
weixin_43862596的博客
09-01 2088
想要设置表单元素不能访问时，使用document.getElementById(“XXX”).disabled=“true”; 但是想要取消disabled的时候，发现document.getElementById(“XXX”).disabled=“false”; 无效 正确的写法为document.getElementById(“XXX”).disabled=false; 去掉引号 或者document.getElementById(“XXX”).disabled=""; 引号内设置为空 ...
原生js document.getElementById("XXX").disabled="false";无效
paopao180的博客
11-15 9808
想要设置表单元素不能访问时，使用document.getElementById("XXX").disabled="true"; 但是想要取消disabled的时候，发现document.getElementById("XXX").disabled="false"; 无效 正确的写法为document.getElementById("XXX").disabled=false; 去掉引号 或者
js和jquery设置disabled属性为true使按钮失效
aabb7654321的博客
02-27 269
设置disabled属性为true即为不可用状态。 JS： document.getElementByIdx("btn").disabled=true; Jquery: $("#btn").attr("disabled",true); html: <input type="submit" id="btn"> 转载于:https://www.cnblo...
使用 JavaScript 删除disabled属性
allway2的博客
05-26 7261
要删除disabled属性，请选择元素并调用其removeAttribute()上的方法，将其disabled作为参数传递，例如btn.removeAttribute('disabled').该removeAttribute方法将从元素中删除disabled属性。 这是本文中示例的 HTML。 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...
使用JavaScript DOM操作来禁用文本框、按钮
kirawoo的专栏
08-27 1123
一 <input type="button" value="禁用" id="btn"/> <input type="text" value="文本框" id="txt"/> <script> document.getElementById("btn").onclick = function () { document.getElementB...
JavaScript表单练习.zip
12-23
1． 掌握JavaScript脚本的调用和基本语法； 2． 掌握JavaScript常用内置对象的基本应用； 3． 掌握BOM和window消息对话框的使用； 4． 掌握HTML DOM动态网页设计技术。
JavaScript表单验证完美代码
10-20
用原生JS写一个简单的表单验证功能，代码分为html部分和js部分，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
js表单计算.html
03-07
很简单的js表单计算工具，inputID+inputID=inputID，适合初学js+html新同学
js表单事件详细汇总
01-21
javascript表单事件汇总 1。onabort（ns3，ns4，ie4）：当用户终止正在打开的网页时产生该事件。 2。onblur（ns3，ns4，ie3，ie4）：某元素失去活动焦点时产生该事件。例如鼠标在文本框中点击后又在文本框外点击时就...
javascript表单事件处理方法详解
10-22
主要为大家详细介绍了javascript表单事件处理方法，感兴趣的小伙伴们可以参考一下
document.getElementById 学习总结
热门推荐
bcbobo21cn的专栏
07-01 3万+
document.getElementById获取控件对象为空的解决方法   1.下面是一个简单的例子，页面加载时显示一段信息 代码如下:                   alert("hello!!!");                 在页面加载之前，会输出一些信息   执行后，确实是“在页面加载前，输出了信息”
藏在IE中的Bug：关于document.getElementById（）方法
火箭豹
08-14 9069
Document类型提供了两个方法：document.getElementById（）和getElementsByTagName（）来取得特定的某个或某组元素的引用。        getElementById（）接收要取得元素的ID，若该元素存在则返回该元素，否则则返回null。注意：这里的ID必须与页面中元素的id特性严格匹配，包括大小写。 Some textvar div=doc
document.getElementById("").submit()作用
w13377917402的博客
11-27 6625
document.getElementById("").submit() 提交 作用和点击提交按钮是一样的。在表单里，一般都会指定表单的action： 表单会把数据提交到action设定的页面。如果没有action，默认是提交给当前的页面。 <script type="text/javascript"> function createOrder(){ document.get...
js隐藏显示div
Esc80的专栏
03-24 3081
第一种方法: #demo1{width:500px;height:200px;border:5px gray solid;margin:0 auto;display:none;background:red;} #demo2{width:500px;height:200px;border:5px gray solid;margin:0 auto;display:none;ba
鼠标点击文本框文字消失离开还原
Esc80的专栏
07-28 1873
方法(1) jquery 点击文本框，提示说明字消失！ $(document).ready(function(){ $("TEXTAREA,input[focucmsg]") .each (function(){ $(this).val($(this).attr("focucmsg")); $(this).val($(this).attr("focucms
js加载新文档
Esc80的专栏
05-12 884
function newDoc()   {   window.location.assign("http://www.w3school.com.cn")   }
javascript表单验证
最新发布
05-20
JavaScript 表单验证是一个非常常见的需求，可以通过 JavaScript 来验证表单是否符合指定的格式要求。 以下是一个简单的表单验证示例： ```html 表单验证 <script type="text/javascript"> function ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值