jqueryeasyui的form插件使用--form('reset') 和form('clear')

最新推荐文章于 2024-04-09 07:17:03 发布
最新推荐文章于 2024-04-09 07:17:03 发布
阅读量2.6k 收藏 2
点赞数 1
分类专栏： jqueryeasyui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31459039/article/details/90524190
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="http://oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>
</head>
<body>
    <h2>Basic CRUD Application</h2>
    <p>Click the buttons on datagrid toolbar to do crud actions.</p>
    
    <table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
            url="get_users.php"
            toolbar="#toolbar" pagination="true"
            rownumbers="true" fitColumns="true" singleSelect="true">
        <thead>
            <tr>
                <th field="firstname" width="50">First Name</th>
                <th field="lastname" width="50">Last Name</th>
                <th field="phone" width="50">Phone</th>
                <th field="email" width="50">Email</th>
            </tr>
        </thead>
    </table>
    <div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
    </div>
    
    <div id="dlg" class="easyui-dialog" style="width:400px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
        <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
            <h3>User Information</h3>
			<input type="hidden" name="id" id="id">
            <input type="hidden" name="recomBitType" id="recomBitType" value="1">
			
            <div style="margin-bottom:10px">
                <input name="firstname" class="easyui-textbox" required="true" label="First Name:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="lastname" class="easyui-textbox" required="true" label="Last Name:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="phone" class="easyui-textbox" required="true" label="Phone:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="email" class="easyui-textbox" required="true" validType="email" label="Email:" style="width:100%">
            </div>
			<div style="margin-bottom:10px">
                    <label>上架时间:</label>
                    <input id="lowershelfTime1" name="lowershelfTime1" class="easyui-datebox" style="width:100%" data-options="required:true,editable:false"  style="width:162px"/>
            </div>
			<div style="margin-bottom:10px">
                    <label>下架时间:</label>
                    <input id="lowershelfTime" name="lowershelfTime" class="easyui-datetimebox" style="width:100%" data-options="required:true,editable:false" style="width:162px"/>
            </div>
			<div style="margin-bottom:10px">
                    <label class=" acti">排序:</label>
                    <input class="input_text easyui-numberbox" name="priority" id="priority" style="width: 200px" data-options="required:true,min:1,max:100"/>
            </div>
			<div style="margin-bottom:10px">
                    <label>一句话描述:</label>
                    <input class="input_text easyui-validatebox" id="description" name="description" style="width:240px;"  data-options="required:true,validType:'maxLength[15]' "/>
            </div>
			<div class="form_list form_list_length">
				<label style="height: 60px">任务描述</label> <input class="easyui-textbox"
					name="jobDescription" data-options="multiline:true"
					style="width: 500px; height: 50px"></input>
			</div>
			 <div class="form_list" id="adtype_id">
				<label>广告类型:</label>
				<span  style="line-height: 35px;">
					<label style='width:auto; background:none; border:none;padding:1px 1px 0 0' for='advertisingType1'>
						<input type="radio" name="advertisingType" id="advertisingType1" value="1" checked="checked"/>单条
					</label>
					<label style='width:auto; background:none; border:none;padding:1px 1px 0 0' for='advertisingType2'>
						<input type="radio" name="advertisingType" id="advertisingType2" value="2" />多条
					</label>
				</span>
			</div>
			
			<div style="margin-bottom:10px">
				<input class="easyui-combobox" name="habbit"  data-options="
					valueField: 'label',
					textField: 'value',
					data: [{
						label: 'java',
						value: 'Java'
					},{
						label: 'perl',
						value: 'Perl'
					},{
						label: 'ruby',
						value: 'Ruby'
					}]" />
			  </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="cancleUser()" style="width:90px">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
    </div>
    <script type="text/javascript">
        var url;
        function newUser(){
            $('#dlg').dialog('open').dialog('center').dialog('setTitle','New User');
            url = 'save_user.php';
			console.log($("#fm").serialize())
		}
        function editUser(){
            var row = $('#dg').datagrid('getSelected');
            if (row){
                $('#dlg').dialog('open').dialog('center').dialog('setTitle','Edit User');
                $('#fm').form('load',row);
                url = 'update_user.php?id='+row.id;
            }
        }
        function saveUser(){
			$("#recomBitType").val("666");
			$('#dlg').dialog('close');
			console.log($("#fm").serialize())
			//$('#fm').form('clear');
			$('#fm').resetForm(); //easyui-datetimebox easyui-textbox easyui-numberbox easyui-datebox失效  easyui-validatebox能清除
        }
		function cancleUser(){
		   $("#recomBitType").val("666");
		   $('#dlg').dialog('close');
           console.log($("#fm").serialize())
		   $('#fm').form('reset');//form('clear') 和jq中的resetForm()和clearForm区别类似
        }
        function destroyUser(){
            var row = $('#dg').datagrid('getSelected');
            if (row){
                $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
                    if (r){
                        $.post('destroy_user.php',{id:row.id},function(result){
                            if (result.success){
                                $('#dg').datagrid('reload');    // reload the user data
                            } else {
                                $.messager.show({    // show error message
                                    title: 'Error',
                                    msg: result.errorMsg
                                });
                            }
                        },'json');
                    }
                });
            }
        }
    </script>
</body>
</html>

jQuery EasyUI 表单插件 - Form 表单

$('#fm').form('validate'); 进行表单字段验证，当全部字段都有效时返回 true 。该方法和 validatebox 插件一起使用。
$('#fm').form('clear');  清除表单数据。
$('#fm').form('reset'); 重置表单数据。该方法自版本 1.3.2 起可用

$('#fm').resetForm() 清除jqeasyui表单有些字段无法清除 例如 easyui-datetimebox easyui-textbox easyui-numberbox easyui-datebox  一般使用$('#fm').form('reset')即可,有隐藏域的  $("input[type='hidden']").val('')重置即可

 

 

 

 

qq_31459039
关注
专栏目录
easyui ajax提交表单,EasyUI Form表单提交
weixin_39669265的博客
08-05 1191
转自：https://www.cnblogs.com/net5x/articles/4576926.htmlForm(表单)使用$.fn.form.defaults重写默认值对象form提供了各种方法来操作执行表单字段，比如：ajax提交, load, clear等等。当提交表单的时候可以调用validate方法检查表单是否有效。用法创建一个简单的HTML表单。构建一个包含id、action和me...
jQuery-easyUI拓展textbox
ern_me的博客
12-27 2472
easyUI扩展textbox
jquery中form.clear函数
水墨江南
04-25 1184
form.clear或者form.form('clear');不能清除隐藏的元素的值，所以如果要连隐藏的数据一起清除，请在使用此函数后再自己清除隐藏元素的值。
easyUI之dialog控件和form控件的使用
小宝的宝呢的博客
09-15 1918
目录 一，dialog（对话框窗口）控件的使用 在userManage.jap中添加如下代码 为修改添加点击事件： 同时在book.js中写如下方法，实现当点击修改时弹出对话框窗口 二，form（表单）控件的使用 在dialog（对话框窗口）中添加form表单 给dialog窗口绑定提交按钮 回显数据：从页面获取数据放到当前窗体 1.datagrid控件获取对应行数据row, 2.对应的行数据row填写到form控件 提交：submitForm 关闭窗体 刷新数据表格 在boo.
jquery重置form表单
二苟
05-30 4044
此篇文章用来防止自己屡次踩坑屡次忘的时候再掉头发。。。 由于JQuery中，提交表单是这样的： $('#form1').submit(); 所以每次想重置的时候就觉得是介样： $('#form1').reset(); 然后就会发现，不行！提示：$(...).reset is not a function emmm，当然，其实可以用这样的方法： document.getElementById("form1").reset(); 但是！这跟页面整体风格看起来不搭呀，我岂会甘心，于是乎，我
jquery重置form表单的方法
技术之旅：一位项目管理者的编程视角与项目管理洞见；
06-02 4844
&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt; function formReset() { document.getElementById("myForm").reset() } &lt;/script&gt; &lt;/head&gt; &lt;form id="myForm
form.reset() 的真正作用，并不是清空所有输入栏
学习笔记
03-11 8204
form.reset() 的真正作用，并不是清空所有输入栏 form 有个方法是 reset()，作用不是清空 &lt;form&gt; 标签中的所有输入栏，而是回到上一次载入页面时的状态。 看例子： &lt;form id="input-form"&gt; &lt;input type="text"&gt; &lt;input type="text"&gt;
jQuery Form插件：formSerialize、fieldSerialize等方法应用解析
"jQuery Form 表单提交插件提供了多个实用API，包括formSerialize、fieldSerialize、fieldValue、resetForm、clearForm和clearFields，用于处理表单数据的序列化、部分元素序列化、获取字段值、重置表单、清空表单...
EasyUI Jquery 学习笔记 —— Form（表单）详细版
最新发布
cccloveforever的博客
04-09 1745
微调器（spinner）是创建其他微调器组件（比如：数值微调器 numberspinner、时间微调器 timespinner，等等）的基础组件。时间微调器（timespinner）是基于微调器（spinner）创建的。密码框会通过显示圆点的方式来保护您输入的密码文本，同时输入框中会提供一个眼睛的图标来通过点击的动作查看您输入的密码，来确保您输入的密码正确无误。与日期框（datebox）相似，日期时间框（datetimebox）允许用户选择要显示的带有指定格式的日期和时间的日期和时间。
easyui重置form表单
chizhi9936的博客
08-05 411
最近项目回到了easyui。开发速度绝对没话说，记一下 $('#DataForm').form('reset'); reset方法在1.3.2后可以使用。 还有一个是$('#DataForm').form('clear')； 区别：clear将表单所有值都清空，包括combobox，...
form表单重置方法 reset() jQuery 中form表单序列化方法 serialize()
kjs--的博客
03-08 906
form表单重置 myform 是form的id属性值 1.调用reset（）方法 function fomrReset() { document.getElementById("myform").reset(); }
关于form表单的reset
bachexian9128的博客
08-29 672
　　今天写代码想重置一个表单，一出手就是$("#formid").reset()。结果表单纹丝不动数据都还在一点效果都没有。 　　后来找时间百度了下jquery的api，确实没有reset方法。那怎么办呢。jquery没有说不定javascript有，找了下javascript的确可以直接reset。 　　用找到对应的dom对象，然后操作dom节点。这样就可以重置表单了。 $(...
关于form的reset()方法
just_coming_here的博客
11-03 8071
官方的解释是，reset() 方法可把表单中的元素重置为它们的默认值。 那么问题来了，当你的表单元素如下 当你修改这个表单的时候，即使把testValue修改了，你使用reset的时候它会变回来，而上面的username和password的内容都会为空。 它恢复了id=test 的i
jQuery EasyUI 表单(Form)用法 ajax提交方法
weixin_33834075的博客
07-29 368
jQuery EasyUI里表单(Form)的用法和jQuery里AJAX的用法差不多，下面介绍一下具体用法： HTML代码： &lt;form id="ff" method="post"&gt; ... &lt;/form&gt; 然后按照《jQuery EasyUI框架使用文档》包含必要文件后，只要在$(function(){ }); 里插入下面的代码即可：如果想使表单变...
java_easyui体系之form
Oscar Chen
01-03 2595
摘要：简单介绍form的提交方式、与validatebox的结合使用。
form.reset() 不是清空form内容
iteye_5696的博客
07-18 581
运行 jQuery 的Tutorials时 执行以下代码总以为会清空myForm内容，实际上只是回到form的上一个状态而已。也就是说，页面加载后就点击 reset，不会有任何变化，只有改变form内容后再点击，才会看到效果 [code="java"] $(document).ready(function() { $("#reset").click(function() { $("#...
EasyUI form（‘clear’）方法报错
言如止水
04-29 3732
带有文件上传的表单不能通过简单的$('#addForm').form('clear');  和var r = $('#addForm').form('validate');的方法来清除和验证表单，否则easyui 会报TypeError: _3b4 is undefined 的异常（如果你不主动捕获是不会报的）
使用jQuery重置表单的方法
u010558155的博客
05-23 5022
需求：在做一个新增信息的页面时，不想使用reset按钮进行表单的重置，而是用confirm先确定用户是否确定要重置，用户确认后再重置。解决方法：在jQuery中查找到reset方法，直接使用$('form').reset();发现不能生效查找资料后发现得像下面这样使用$('form')[0].reset();解释是$('form')获取到是一个数组，在控制台中打印出来可以看到，所以要用$('for...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值