EasyUI之表单Form

最新推荐文章于 2024-07-24 11:09:48 发布

iteye_8264

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量299

点赞数

文章标签： javascript ViewUI

1、实例背景

EasyUI常用的Form表单，利用输入框直接提交值；清空按钮，将填写有误的数据进行清空

2、实例源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>EasyUI之表单Form</title>
		<link rel="stylesheet" href="../themes/black/easyui.css" />
		<link rel="stylesheet" href="../themes/icon.css" />
		<link rel="stylesheet" href="../css/demo.css" />
		<script type="text/javascript" src="../js/jquery.min.js" ></script>
		<script type="text/javascript" src="../js/jquery.easyui.min.js" ></script>
		<script>
			$(document).ready(function(){
				//提交事件
				$("#submitBtn").click(function(){
					$(this).form("submit");
				});
				
				//重置事件
				$("#resetBtn").click(function(){
					$(this).form("clear");
				});
			});
		</script>
	</head>
	<body>
		<div class="easyui-panel" title="发送邮件" style="width:400px">
			<div style="padding:10px 60px 20px 60px">
			    <form id="ff" method="post">
			    	<table cellpadding="5">
			    		<tr>
			    			<td>用户名:</td>
			    			<td><input class="easyui-textbox" type="text" name="name" data-options="required:true"></input></td>
			    		</tr>
			    		<tr>
			    			<td>电子邮件:</td>
			    			<td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
			    		</tr>
			    		<tr>
			    			<td>主题:</td>
			    			<td><input class="easyui-textbox" type="text" name="subject" data-options="required:true"></input></td>
			    		</tr>
			    		<tr>
			    			<td>消息:</td>
			    			<td><input class="easyui-textbox" name="message" data-options="multiline:true" style="height:100px"></input></td>
			    		</tr>
			    		<tr>
			    			<td>语言:</td>
			    			<td>
			    				<select class="easyui-combobox" name="language" style="width: 172px;">
			    					<option value="1">中文简体</option>
			    					<option value="2">中文繁体</option>
			    					<option value="3">英语</option>
			    			    </select>
			    			</td>
			    		</tr>
			    	</table>
			    </form>
			    <div style="text-align:center;padding:5px">
			    	<a href="javascript:void(0)" class="easyui-linkbutton" id="submitBtn" style="width: 100px;">提交</a>
			    	<a href="javascript:void(0)" class="easyui-linkbutton" id="resetBtn" style="width: 100px;">清空</a>
			    </div>
		    </div>
		</div>
	</body>
</html>

3、实例结果

（1）点击提交

（2）点击清空

iteye_8264

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI之表单Form

1、实例背景 EasyUI常用的Form表单，利用输入框直接提交值；清空按钮，将填写有误的数据进行清空2、实例源码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;EasyUI之表单Form&lt;/title&gt; &lt;li
复制链接

扫一扫