js实现表单内容修改与初始值进行比较
我们有时候需要这样的一个功能,即我们从数据库读取了一些默认值到表单,此时,我们要对表单进行填写,我们希望我们填写过后的内容与初始的内容进行比较,当我们重新填写的内容与初试内容(各个表单的内容都要进行比较)不同时,我们要实现某种功能。
以下是今天一个朋友找我要一个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>具体的效果,诸位可以将代码在本地运行,就可知道。
不足之处还望予以指正,在此拜谢!