首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

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

2012-11-06 
js实现表单内容修改与初始值进行比较我们有时候需要这样的一个功能,即我们从数据库读取了一些默认到表单,

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>

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

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

不足之处还望予以指正,在此拜谢!




热点排行
Bad Request.