js实现表单内容修改与初始值进行比较

xumingrencai

浏览: 1181328 次

最近访客更多访客>>

u012363178

zhaodengfeng1989

董不懂不懂

流_年

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1503)

社区版块

存档分类

我们有时候需要这样的一个功能，即我们从数据库读取了一些默认值到表单，此时，我们要对表单进行填写，我们希望我们填写过后的内容与初始的内容进行比较，当我们重新填写的内容与初试内容（各个表单的内容都要进行比较）不同时，我们要实现某种功能。

以下是今天一个朋友找我要一个demo，类似的，希望当表单的内容与初始值内容不相同时，实现按钮的disableed的切换效果。上代码：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>unequalcheck</title>
<script type="text/javascript">
	var arr = [];
	function getValue() {
		var form = document.getElementById('form');
		var inputs = form.getElementsByTagName('input');
		var selected = form.getElementsByTagName('select');
		var un = inputs.item(0).value;
		var pw = inputs.item(1).value;
		var sex = selected.item(0).options[selected.item(0).selectedIndex].value;
		return [un , pw , sex];
	}
	
	function onloadFun() {
		arr = getValue();
		dis();
	}
	
	function dis() {
		var st = document.getElementById('submit');
		st.disabled = true;
		//alert(1);
	}
	
	function en() {
		var st = document.getElementById('submit');
		st.disabled = false;
		//alert(2);
	}
	
	function change() {
		var thisarr = getValue();
		var flag = compare(thisarr , arr);
		if(flag) {
			dis();
		}
		else {
			en();
		}
	}
	
	function compare(a , b) {
		var flag = true;
		for(var i = 0; i < a.length; i++) {
			if(a[i] !== b[i]) {
				flag = false;
			}
		}
		return flag;
	}
	
	window.onload = onloadFun;
</script>
</head>

<body>
<form action="javascript:void(0);" method="get" id="form">
	UserName : <input type="text" name="un" value="un" onchange="change();" /><br />
    PassWord : <input type="password" name="pw" value="pw" onchange="change();" /><br />
    Sex : <select name="sex" onchange="change();">
    	<option value="Boy">Boy</option>
        <option value="Girl">Girl</option>
    </select><br />
    <input type="submit" value="Submit" id="submit" /> <input type="reset" value="Reset" onclick="dis();" />
</form>
</body>
</html>

没有添加注释，不过也算是比较清晰，希望大家能够看懂。

具体的效果，诸位可以将代码在本地运行，就可知道。

不足之处还望予以指正，在此拜谢！

分享到：

写在腾讯大讲堂演讲之后 | Firefox下margin-top失效解决技巧

2012-10-17 21:32
浏览 562
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js实现表单内容修改与初始值进行比较

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js实现表单内容修改与初始值进行比较

评论

发表评论

相关推荐

最近访客更多访客>>