`

jquery处理任意多个元素,判断任意个文本框的值是否被修改

jQueryJavaScriptCSS浏览器 
阅读更多

预想使用focus等事件，考虑到浏览器不支持的缘故，便使用了

页面代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>委员基础信息维护</title>
		<!-- 加载easyui样式表 -->
		<link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/icon.css">
		<!-- 加载jquery -->
		<script type="text/javascript" src="plugins/jquery/jquery-1.4.2.min.js"></script>
		<!-- 加载easyui -->
		<script type="text/javascript" src="plugins/jquery/jquery-easyui-1.1.2/jquery.easyui.min.js"></script>
		<!-- 加载jquery-form -->
		<script type="text/javascript" src="plugins/jquery/jquery.form.js"></script>
		<!-- 加载自定义js -->
		<script type="text/javascript" src="javascript/sysmanage/personinfo.js"></script>
	</head>

	<body style="background: #c7dcf1;">
	
	
	<form id="upForm" method="POST" enctype="multipart/form-data"> 
	
	
		<table>
			<tr>
				<td>
					&nbsp;
					<input type="button" name="" id="" value="委员维护"
						onclick="show_win()">
				</td>
			</tr>
		</table>
		<div id="win" style="background-color: #d1e1f0;" model="true">
			<br>
			<fieldset>
				<legend style="font-size: 14; font-weight: bold">
					委员基本信息
				</legend>
				<div style="float: left;">

<table width="1150"  border="0">
    <tr>
      <td width="155" >委员证号：</td>
      <td width="97" ><label>
        <input type="text" name="committeemannumber" id="committeemannumber" size="13"/>
      </label></td>
      <td width="94" >届次：</td>
      <td width="97"><label>
        <input type="text" name="sessions" id="sessions" size="13"/>
      </label></td>
      <td colspan="4">&nbsp;</td>
      <td colspan="2" rowspan="6">
      <div id="right" style="float: none; text-align: center;">
					<div style="width: 120px; height: 150px; background-color: #cccccc">
						<img id="userPhoto"/>
					</div>
					<br>
					<input type="button" id="" name="" value=" 上传 " onclick="return show_upload();">
							&nbsp;
							<input type="button" value=" 修改 ">
					
					<div id="uploadWin" class="easyui-window" title="My Window" closed="true">
						<!--  <form id="upForm" method="POST" enctype="multipart/form-data">  
					        上传文件：<input type="file" name="file" id="theFile"/>  
					        <br/>  
					        <input type="submit" value="提交" onclick="return upload();"/> 
					        <input type="button" value="取消" /> 
					        <div id="upMessage" style="displan:hidden"></div>  
					    </form>  -->
					    
					    
					    上传文件：<input type="file" name="file" id="theFile"/>  
					        <br/>  
					        <input type="submit" value="提交" onclick="return upload();"/> 
					        <input type="button" value="取消" /> 
					        <div id="upMessage" style="displan:hidden"></div>
					    
					    
					    
					</div>
					
					
				</div>
      </td>
    </tr>
    <tr>
      <td>姓名：</td>
      <td><label>
        <input type="text" name="name" id="name" size="13" />
      </label></td>
      <td>性别：</td>
      <td><label>
        <input type="text" name="sex" id="sex" size="13"/>
      </label></td>
      <td width="113">民族：</td>
      <td width="97"><label>
        <input type="text" name="nationality" id="nationality" size="13"/>
      </label></td>
      <td width="103">出生日期：</td>
      <td width="97"><label>
        <input type="text" name="birthday" id="birthday" size="13" class="easyui-datebox"/>
      </label></td>
    </tr>
    <tr>
      <td height="26">工作系统：</td>
      <td><label>
        <input type="text" name="worksystem" id="worksystem" size="13"/>
      </label></td>
      <td>所在地：</td>
      <td><label>
        <input type="text" name="locus" id="locus" size="13"/>
      </label></td>
      <td>保密电话：</td>
      <td><label>
        <input type="text" name="secrettelephone" id="secrettelephone" size="13"/>
      </label></td>
      <td>学历：</td>
      <td><label>
        <input type="text" name="degree" id="degree" size="13"/>
      </label></td>
    </tr>
    <tr>
      <td>单位名称：</td>
      <td colspan="3"><label>
        <input type="text" name="unit" id="unit" size="50"/>
      </label></td>
      <td>行政级别：</td>
      <td><label>
        <input type="text" name="rank" id="rank" size="13"/>
      </label></td>
      <td>单位电话：</td>
      <td><label>
        <input type="text" name="unittelephone" id="unittelephone" size="13"/>
      </label></td>
    </tr>
    <tr>
      <td>现任职务：</td>
      <td colspan="3"><label>
        <input type="text" name="post" id="post" size="50"/>
      </label></td>
      <td>社会兼职：</td>
      <td colspan="3"><label>
        <input type="text" name="sideline" id="sideline" size="50"/>
      </label></td>
    </tr>
    <tr>
      <td>单位地址：</td>
      <td colspan="3"><label>
        <input type="text" name="unitaddress" id="unitaddress" size="50"/>
      </label></td>
      <td>单位邮编：</td>
      <td><label>
        <input type="text" name="unit_number" id="unit_number" size="13"/>
      </label></td>
      <td>交换箱号：</td>
      <td><label>
        <input type="text" name="exchangeboxnumber" id="exchangeboxnumber" size="13"/>
      </label></td>
    </tr>
    <tr>
      <td>家庭地址：</td>
      <td colspan="3"><label>
        <input type="text" name="houseaddress" id="houseaddress" size="50"/>
      </label></td>
      <td>家庭邮编：</td>
      <td><label>
        <input type="text" name="housepostalcode" id="housepostalcode" size="13" />
      </label></td>
      <td>家庭电话：</td>
      <td><label>
        <input type="text" name="housetelephone" id="housetelephone" size="13"/>
      </label></td>
      <td width="142">手机号：</td>
      <td width="91"><label>
        <input type="text" name="mobiletelephone" id="mobiletelephone" size="13"/>
      </label></td>
    </tr>
    <tr>
      <td height="31">电子邮箱：</td>
      <td colspan="3"><label>
        <input name="email" type="text" id="email" size="50"/>
      </label></td>
      <td>文件去向：</td>
      <td><label>
        <input type="text" name="docwhither" id="docwhither" size="13"/>
      </label></td>
      <td>职业专长：</td>
      <td><label>
        <input type="text" name="occupation" id="occupation" size="13"/>
      </label></td>
      <td>职称：</td>
      <td><label>
        <input type="text" name="professiontitle" id="professiontitle" size="13"/>
      </label></td>
    </tr>
    <tr>
      <td>参政日期：</td>
      <td><label>
        <input type="text" name="franchisedate" id="franchisedate" size="13" class="easyui-datebox"/>
      </label></td>
      <td>党派：</td>
      <td><label>
        <input type="text" name="party" id="party" size="13"/>
      </label></td>
      <td>小组：</td>
      <td><label>
        <input type="text" name="team" id="team" size="13"/>
      </label></td>
      <td>界别：</td>
      <td><label>
        <input type="text" name="sector" id="sector" size="13"/>
      </label></td>
      <td>政协职务：</td>
      <td><label>
        <input type="text" name="pccpost" id="pccpost" size="13"/>
      </label></td>
    </tr>
    <tr>
      <td>专委会及职务：</td>
      <td colspan="2"><label>
        <input type="text" name="committee" id="committee" size="28"/>
      </label></td>
      <td><label>
        <input type="text" name="committeepost" id="committeepost" size="13"/>
      </label></td>
      <td>当前状态：</td>
      <td colspan="3"><label>
        <input type="text" name="currentstatus" id="currentstatus" size="50"/>
      </label></td>
      <td>当前状态日期：</td>
      <td><label>
        <input type="text" name="currentstatusdate" id="currentstatusdate" size="13" class="easyui-datebox"/>
      </label></td>
    </tr>
    <tr>
      <td>司机姓名：</td>
      <td colspan="3"><label>
        <input type="text" name="driver_name" id="driver_name" size="50"/>
      </label></td>
      <td>司机电话：</td>
      <td colspan="3"><label>
        <input type="text" name="driver_telephone" id="driver_telephone" size="50"/>
      </label></td>
      <td>车牌：</td>
      <td><label>
        <input type="text" name="car_number" id="car_number" size="13"/>
      </label></td>
    </tr>
    <tr>
      <td>简介：</td>
      <td colspan="9"><label>
        <textarea name="resume" id="resume" cols="90" rows="5"></textarea>
      </label></td>
    </tr>
  </table>
			</fieldset>
			<br>
			<fieldset>
				<legend style="font-size: 14; font-weight: bold">
					委员用户信息
				</legend>
				<table>
					<tr>
						<td>
							<label>
								用户名：
							</label>
							<input type="text" name="username" id="username" size="32">
						</td>
						<td>
							<label>
								用户密码：
							</label>
							<input type="password" name="password" id="password" size="32">
						</td>
						<td>
							<label>
								用户密码确认：
							</label>
							<input type="password" name="confirmPassword" id="confirmPassword" size="32">
						</td>
					</tr>
				</table>
			</fieldset>
			<div style="clear: both; text-align: center;">
				<table>
					<tr>
						<td>
							<input type="submit" value="   确定   " onclick="return submitInfo();">
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="button" value="   取消   " onclick="return close_win();">
						</td>
					</tr>
				</table>
			</div>
		</div>
		
		</form>
		
		
	</body>
</html>

 

判断其中任意一个文本框的值是否被修改

//绑定事件
//为界面上的所有元素添加focusin和focusout事件，
//用于判断用户是否修改了该值
function bindEvent()
{
	var temp;
	$("#committeemannumber,#sessions,#name,#committeemannumber,#sessions,#username,#sex,#nationality,#birthday,#worksystem,#locus,#secrettelephone,#degree,#unit,#rank,#unittelephone,#post,#sideline,#unitaddress,#exchangeboxnumber,#houseaddress,#housepostalcode,#housetelephone,#mobiletelephone,#email,#docwhither,#occupation,#professiontitle,#franchisedate,#party,#team,#sector,#pccpost,#committee,#committeepost,#currentstatus,#currentstatusdate,#resume,#car_number,#driver_name,#driver_telephone,#unit_number").bind({
		focusin:function (){
				//取得当前元素的id
				//alert(this.id);
				//alert("获得焦点时的值是："+$(this).val());
				temp=$(this).val();
			},
		focusout:function (){
			//alert("失去焦点时的值是："+$(this).val());
			var lastValue=$(this).val();
			if(temp!=lastValue&&null!=lastValue&&""!=lastValue)
			{
				alert("值改变了！");
			}
			else
			{
				alert("没有变!");
			}
		}
	 });
}

 

当然需要

$(document).ready(function() {
       bindEvent();
});

 

分享到：
| 将图片等文件上传到数据库
评论
发表评论

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

相关推荐

    动态创建多个文本框取值

    在.NET Web开发中，动态创建多个文本框取值是一个常见的需求，特别是在用户需要输入大量数据或者根据业务逻辑自适应界面元素数量的情况下。标题"动态创建多个文本框取值"所涉及的知识点主要涵盖以下几个方面： 1. *...

    JQuery 文本框回车跳到下一个文本框示例代码

    1. `loginInputForm.find('input')`：这部分是jQuery的选择器，`loginInputForm`是一个ID或者类名，用于标识包含文本框的表单元素。`find('input')`则是寻找该表单内的所有`&lt;input&gt;`标签，即文本框。 2. `.on('...

    下拉框和文本框组合共用-可以输入的下拉框ok

    在网页设计和开发中，"下拉框和文本框组合共用-可以输入的下拉框"是一个常见的交互元素，它结合了下拉选择框（Dropdown）和输入文本框（Input Text）的功能，以提供更灵活、用户友好的界面。这种设计通常用于场景，...

    jquery 1.4 cheatsheet

    - `$.attr(map)`：设置多个属性值。 - `$.attr(name,fn(index,attr))`：动态设置属性值。 - `$.removeAttr(name)`：删除元素的属性。 - **操作类**： - `$.addClass(class)`：为元素添加类。 - `$.addClass(fn...

    jQuery程序.doc

    在提供的示例代码中，我们看到多个使用jQuery实现的交互功能，包括内容的显示与隐藏、鼠标悬停效果、互斥显示以及动态内容的添加。 1. 显示/隐藏元素：在第一个例子中，当用户点击列表项（li）内的span元素时，该...

    js+asp实现树形结构，选取文本框可以获取树形节点的值

    描述中提到了"无限递归结构"，这表示树形结构可以有任意多级别的子节点。在JavaScript中，可以通过递归函数实现无限级别的节点展开和折叠。ASP则负责从数据库中获取所有层次的数据，并以合适的方式返回给前端。 ...

    jquery UI中文文档

    每个版本的 jQuery UI 包含多个预设主题，如 `smoothness`、`redmond` 和 `ui-lightness`，这些主题可以通过 CSS 文件进行切换。 **API 参考** jQuery UI 提供了详细的 API 文档，包括函数、选项、事件和方法的...

    jQuery完全实例.rar

    你可以在一个页面中使用任意多个$(document).ready事件。 参考 ready(Function) 获取更多 ready 事件的信息。 -------------------------------------------------------------------------------- A shorthand ...

    jQuery实现随意改变div任意属性的名称和值(部分原生js实现)

    文件所描述的技术可以在不影响页面其他元素的情况下，动态地修改一个或多个特定HTML元素的属性。通过原生JavaScript或jQuery，开发者可以创建更加动态的用户界面，为用户提供更加丰富的交互体验。这种技术常常用于...

    asp 通过变量生成二维码可批量任意

    在这个例子中，用户可以在文本框中输入任意文本，点击按钮后，`generateQR`函数会被调用，使用输入的文本生成二维码并显示在页面的指定区域。 为了实现批量生成，你可以通过循环遍历一个包含多个数据项的数组或集合...

    Jquery中val()表单取值赋值的实例代码

    本知识点将详细介绍JQuery中val()方法的基本使用方法，包括如何对单个和多个元素进行操作，以及如何处理单选和多选的select元素，还包括如何使用JQuery处理文本框和按钮值的获取与设置。 1. 单个元素的值获取与设置...

    jquery-easyui-1.4.5 demo带索引及中文api

    `jQuery EasyUI 1.4.5` 版本是这个框架的一个重要版本，包含了多个改进和修复。在描述中提到的 "demo带索引及中文API"，意味着这个压缩包不仅提供了演示示例，还增加了方便开发者查阅的索引和中文API文档，这对于...

    Jquery之easyui超全示例

    6. **布局（Layout）**：布局组件允许你将页面划分为多个区域，可以自由调整大小和位置，非常适合构建复杂的仪表板。 7. **树形视图（Tree）**：树形视图用于展示层级结构的数据，可以进行展开、折叠、选择等操作。...

    draggabilly | 功能强大的拖动拖拽元素插件

    只需简单地指定元素，即可轻松启用拖放操作，无论是图片、文本框还是自定义的UI组件，都能轻松实现拖放效果。 2. **触控设备支持**：随着移动设备的普及，`draggabilly`对触摸事件的完美支持成为其一大优势。用户...

    基于Jquery的实现回车键Enter切换焦点

    本例中强调了代码在多个浏览器中的兼容性，包括IE7, IE8, Firefox3, Chrome2和Safari4。JQuery库的一大优势就是简化了跨浏览器的兼容性问题。 ### 知识点九：CSS类选择器 在本例中，页面中的`&lt;input&gt;`元素被赋予了...

    jquery中键盘事件小结

    在这个示例中，我们定义了四个函数，分别对应四个方向键的动作，然后在`keydown`事件处理函数中通过`event.keyCode`的值来调用相应的函数，实现元素位置的改变。 总之，jQuery的键盘事件为我们提供了丰富的用户交互...

    jQuery属性选择器用法实例分析

    此外，jQuery还支持复合过滤器，可以同时根据多个条件选取元素。如`$("input[type='radio'][checked='checked'],input[type='checkbox'][checked='checked']")`将选取所有被选中的单选框和复选框。 这些选择器在...

    c#实现日历控件的js代码

    在.NET开发环境中，C#是一种常用的编程语言，Visual Studio（VS）是它的主要集成开发环境。...同时，这个过程也可以扩展到其他前端框架，如jQuery或更现代的React、Vue等，它们都有丰富的插件库供开发者选择和定制。

Magicbox
Global site tag (gtag.js) - Google Analytics