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)点击清空