js实现表单内容修改与初始值进行比较
2012-10-18 12:03:59 来源:WEB开发网核心提示: 我们有时候需要这样的一个功能,即我们从数据库读取了一些默认值到表单,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>68q.cn - 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>
更多精彩
赞助商链接