原理很简单,通过本地存储机制(userData或者localStorage),存储表单中元素的状态到本地. 需要时可以把所存储的状态还原到表单元素上. 其中也用了json数据格式, 之前想对插件中所需的功能,从零开始写,但是觉得太冗余,没必要.就基于另外2个plugin现实. 分别是:jquery.json 和 jStorage. 这两个插件本身实用小巧, api简单易用, 其中jStorage在老一点的浏览器(不支持原生JSON操作)中需要用到jquery.json或者json2 formStorage对jQuery对...
通过下面的代码可以实现这种切换的效果。 首先我们来看界面： 界面代码： 代码如下:<body> <form id="form1" runat="server"> <div align="center"> <fieldset style="width: 400px; height: 200px;"> <table cellpadding="3" cellspacing="3" border="0"> <tr> <td> <asp:Label ID="lblName" Text="姓名: " runat="server"></asp:Label> </td> <td> <asp:TextBox ID="txtName" Width="200px" runat="server"></asp:TextBox> </td...
很显然，这样做能提升更好的用户体验。 html代码： 代码如下:<form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <input type="text" id="username" class="required"/> </div></form> jquery代码： 代码如下:<script type="text/javascript"> $(function(){ $(form :input).blur(function(){ var $parent=$(this).parent(); $parent.find(".formtips").remove(); if($(this).is(#userna...
Form 表单 用法 代码如下:<form id="ff" method="post"> ... </form> 使 form 成为 ajax 提交的 form 。 代码如下:$(#ff).form({ url:..., onSubmit: function(){ // 做某些检查 // 返回 false 来阻止提交 }, success:function(data){ alert(data) } }); // 提交 form $(#ff).submit(); 去做一个提交动作。 代码如下:// 调用 form 插件的 submit 方法来提交 form $(#ff).form(submit, { url:..., onSubmit: function(){ // 做...
代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>createElement</title> <style type="text/css"> .warpper{ border:1px solid red; padding:8px;} </style> <script type="text/javascript" language=...
如下： 1：非Ajax 前台：对应后台：2：JQuery之Ajax 在介绍使用JQuery提交表单前，我们需要首先引用jquery.form.js，它来自于http://www.malsup.com/jquery/form/，至此，我们需要引用的JS文件有：功能要求：Ajax提交表单，在控制器HelloWorld4Controller中处理请求，并返回若干数据，数据格式为JSON。 首先，我们假设返回的JSON实体为： 代码如下:public class LoginResultDTO { public bool Success { get; set; } public strin...
:enable 获取可输入状态的元素 :disabled 获取不可输入状态的元素 :checked 获取选中的表单元素 :seleced 获取下拉框中选中的元素 下面看一粒例子 Html 代码如下:<body> <form id="form1" runat="server"> <div> <ul> <li><label>订单号码：</label><input type="text" disabled="disabled" /></li> <li><label>订单所有者：</label><input type="text" /></li> <li> <input type="checkbox" name="ca" value="红"/>红 <input typ...
$("#keyword")[0].value = ""; /*获得TEXT.AREATEXT的值*/ var textval = $("#text_id").attr("value"); //或者 var textval = $("#text_id").val(); /*获取单选按钮的值*/ var valradio = $("input[type=radio]:checked").val(); /*获取一组名为(items)的radio被选中项的值*/ var item = $('input[name=items]:checked').val(); /*获取复选框的值*/ var checkboxval = $("#checkbox_id").attr("value")； /*获取下拉列表的值*/ va...
编者按：本文是一位20岁的孟买小伙子Shamuil分享的，他是一位自由职业设计师和Blogger。 在全球访问量最高的前1000个网站中，几乎没有不用jQuery的。如今jQuery的力量是无限强大。本文将向你展示分享jQuery在表单方面 的强大，包括验证表单、密码遮罩表单和评论实时预览等。所以，不要错过本文哦，来看看当今jQuery的表单变化趋势吧。 1- jquery Form Validator2- Uniform 3- Autotab 4- jquery Niceforms 5- jQuery inline form v...
改变文本框的获得焦点的样式 代码如下:<form action="#" method="POST" id="regForm"> <fieldset> <legend>个人基本信息</legend> <div> <label for="username">名称：</label> <input id="username" type="text"> </div> </fieldset> </form> 首先在css中添加一个类名为focus的样式。 css代码如下： 代码如下:.focus { border: 1px solid #f00; background: #fcc; } 然后为文本框添加获取和失去焦点事件 代码如下:$(function...
checkbox的级联效果 代码如下:<form> 你爱好的运动？<br/> <input type="checkbox" id="CheckedAll" />全选/全不选<br/> <input type="checkbox" name="items" value="足球"/>足球 <input type="checkbox" name="items" value="篮球"/>篮球 <input type="checkbox" name="items" value="羽毛球"/>羽毛球 <input type="checkbox" name="items" value="乒乓球"/>乓球球 <input type="button" id="send" value="提 交"/> $(#CheckedA...
本文收集了非常棒的jQuery表单插件与大家分享，欢迎大家推荐更多更好的插件。 1- jQuery inline form validation2- Uniform 3- Autotab 4- jquery Niceforms 5- jquery Form Validator6- Toggle FormText plug-in 7- jQuery Field Plug-in 8- In-Field Labels jQuery Plugin 9- jQuery Comment Preview10- Input Fields with Images11- Pretty Comments12- jQuery Highlight Plugin13- Select Multiple Form Fields14- Password M...
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是介绍两个最常用的jQuery插件. 分别用于表单验证和自动完成提示(类似google suggest). 二.前言 研究别人的作品真是一件花时间而且痛苦的过程. 当然也和本人英文不好有关. 总觉得控件作者写了很多文档但是都不够系统, 需要深入研究很多的实例后才能了解作者的思路.所以学习和研究一个插...
.serializeArray() 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。(摘自jquery文档)。 有以下一个表单窗口，代码： 代码如下:<form action="" method="post" id="tf"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <th>姓名：</th> <td> <input type="text" id="txtUserName" name="UserName" /> </td> <th>联系手机：</th> <td> <input type="text" name="Mobile" id="txtMobil...
在Jquery中这三个函数如果有参数的话就是赋值操作，没有参数则是取值操作，其中val()是一个很重要的方法，和它相关的表单对象如：input系的标签、select、textarea等都是用于和服务器端交互的标签元素，所以要搞清楚这个val（）； 对于radio、checkbox、select的赋值操作： 代码如下:$("input[name=a]").val(["娱乐1"]); $("input[type=checkbox]").val(["篮球", "游戏"]); $("select").val(["篮球", "游戏"]); 代码分析： 对rad...