Bootstrap-查询按钮和重置按钮

原创 2016年05月30日 23:37:25

1、问题背景

     一般情况下,查询列表有查询条件、查询按钮和重置按钮,输入查询条件,点击查询按钮查询列表等数据;点击重置按钮会将查询条件恢复到原始状态


2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Bootstrap-查询按钮和重置按钮</title>
		<link rel="stylesheet" href="../js/bootstrap-3.3.5/dist/css/bootstrap.css" />
		<script type="text/javascript" src="../js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="../js/bootstrap-3.3.5/dist/js/bootstrap.js" ></script>
		<script>
			$(document).ready(function(){
				//查询按钮事件
				$("#searchBtn").off().on("click",function(){
					var stuNo = $("#stuNo").val();
					var stuName = $("#stuName").val();
					alert("学生学号:"+stuNo+"\n学生姓名:"+stuName);
					console.info(stuNo+"\n"+stuName);
				});
				
				//重置按钮事件
				$("#resetBtn").off().on("click",function(){
					$("#stuNo").val("");
					$("#stuName").val("");
				});
			});
		</script>
	</head>
	<body>
		<div class="row" style="padding-top: 10px;">
			<div class="col-xs-12">
				<div class="col-xs-2">
					<input type="text" class="form-control" id="stuNo" placeholder="请输入学号"/>
				</div>
				<div class="col-xs-2">
					<input type="text" class="form-control" id="stuName" placeholder="请输入姓名"/>
				</div>
				<div class="col-xs-2">
					<button class="btn btn-primary btn-sm" id="searchBtn">查询</button>
					<button class="btn btn-sm" id="resetBtn">重置</button>
				</div>
			</div>
		</div>
	</body>
</html>

3、实现结果

(1)初始化



(2)输入查询条件点击“查询”



(3)点击“重置”


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

mybatis操作数据库是如果mapper文件中的id和java代码中的参数名字不同是报的错

mapper.xml文件: http://mybatis.org/dtd/mybatis-3-mapper.dtd">     INSERT INTO   ${tableName}(  ...

datepicker 失效,jquery-ui.js 冲突,日历框跑出来了

在项目中增加了jquery file upload 的一些内容之后,

提交重置检查按钮

  • 2012年10月23日 23:09
  • 256B
  • 下载

HTML5文本域,单选框、复选框,下拉列表框,提交、重置按钮的设置,label标签

文本域,支持多行文本输入 当用户需要在表单中输入大段文字时,需要用到文本输入域。 语法:   rows="行数"cols="列数">文本 1、标签是成对出现的,以开始,以结束。 ...

[jQuery][插件]重置文本框值的小按钮

先上图HTML ×

ExtendTransform仿NGUI在Transfrom左边添加重置按钮

using UnityEngine; using UnityEditor; [CanEditMultipleObjects] [CustomEditor(typeof(Transform), tru...
  • zuig2
  • zuig2
  • 2015年10月16日 13:45
  • 270

BootStrap下拉按钮

摘自《极客学院》 1、效果图: 2、html代码: BootStrap下拉按钮 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Bootstrap-查询按钮和重置按钮
举报原因:
原因补充:

(最多只允许输入30个字)