我们有时候需要这样的一个功能,即我们从数据库读取了一些默认值到表单,此时,我们要对表单进行填写,我们希望我们填写过后的内容与初始的内容进行比较,当我们重新填写的内容与初试内容(各个表单的内容都要进行比较)不同时,我们要实现某种功能。
以下是今天一个朋友找我要一个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" οnchange="change();" /><br />
PassWord : <input type="password" name="pw" value="pw" οnchange="change();" /><br />
Sex : <select name="sex" οnchange="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" οnclick="dis();" />
</form>
</body>
</html>
没有添加注释,不过也算是比较清晰,希望大家能够看懂。
具体的效果,诸位可以将代码在本地运行,就可知道。
不足之处还望予以指正,在此拜谢!