jquery中Form相关操作

原创 2016年08月29日 18:37:56

本文介绍jquery操作form表单中常用的操作方法:  

重置表单(reset)

通常我们提交表单都会通过ajax异步提交,在提交完成后需要手动清空input中所有输入的内容,但jquery不能直接reset一个form,而是通过如下实现:

$("#form_id").each(function(){this.reset()}); 

遍历input控件

按上一思路,如果我想遍历所有form内控件呢?$("#form_id").each(); ?实现上each中的this是对所有form中所有控件的操作,并不会单独返回每个控件的引用,只能通过如下:

$("#form_id input").each(function(){alert(this.id);}); 

序列化表单(serialize)

serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。例如下面的表单:

<form>
  <div><input type="text" name="a" value="1" id="a" /></div>
  <div><input type="text" name="b" value="2" id="b" /></div>
  <div><input type="hidden" name="c" value="3" id="c" /></div>
  <div>
    <textarea name="d" rows="8" cols="40">4</textarea>
  </div>
  <div><select name="e">
    <option value="5" selected="selected">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select></div>
  <div>
    <input type="checkbox" name="f" value="8" id="f" />
  </div>
  <div>
    <input type="submit" name="g" value="Submit" id="g" />
  </div>
</form>
输出标准的查询字符串:
a=1&b=2&c=3&d=4&e=5

禁用与启用input控件

正常的禁用input控件,直接设置disabled属性:

$("#input_id").attr("disabled","disabled");
然而,启动并不是设置disabled为false,,,而是:
$("#input_id").removeAttr("disabled"); 




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

jQuery操作Form表单元素

Web开发中经常需要操作表单,form表单元素有select、checkbox、radio、textarea、button、file、text、hidden、password等。其中checkbox和...
  • accountwcx
  • accountwcx
  • 2015年07月27日 09:13
  • 5366

10分钟-jQuery表单选择器

1.:input表单选择器如何获取表单全部元素?:input表单选择器可以实现,它的功能是返回全部的表单元素,不仅包括所有标记的表单元素,而且还包括、 和 标记的表单元素,因此,它选择的表单元素是最广...
  • jimo_lonely
  • jimo_lonely
  • 2016年04月01日 23:11
  • 5968

巧用jQuery选择器写表单办法总结(提高效率)

相信很多小伙伴都会遇到需要做表单的需求,就像我现在做的医院项目,茫茫多的表单无穷无尽。一开始做表单使用最笨的方法:一个个span去定义ID,每个数据都用ajax获取后赋值显示,然后在表单提交前一个个用...
  • violetjack0808
  • violetjack0808
  • 2016年08月16日 15:33
  • 2399

form相关操作

  • 2012年06月28日 07:13
  • 1.73MB
  • 下载

jquery验证form,表单,操作cookie 插件

  • 2011年12月13日 13:01
  • 3KB
  • 下载

onsubmit阻止form表单提交与onclick的相关操作

return false会阻止表单提交,基本上关于onsubmit=return false有以下几点要注意的地方,学习后台编程的朋友一定要知道。 1. return 的返回值问题,函数中r...
  • KuangYeYaZi
  • KuangYeYaZi
  • 2016年08月14日 14:26
  • 937

利用JQuery操作form表单,例如:text,radis,checkbox,file等等之类的

今天给大家总结一下form表单中一些常用的操作,例如:获取值,隐藏控件,设置控件不可修改,设置值等等之类的。 下面看具体的例子: Form表单基本操作 ...
  • linzhiqiang0316
  • linzhiqiang0316
  • 2016年11月04日 15:42
  • 1509

Jquery操作select、form表单

一、问题描述                 需要解决的问题:上面的收缩框是一个form表单,点击确认后会将各搜索条件传递到action指定的url指向的php页面,经过处理后将搜索结果显示...
  • houqingdong2012
  • houqingdong2012
  • 2013年07月07日 21:08
  • 3793

利用JQuery操作form表单,例如:text,radis,checkbox,file等等之类的

  • xw1985520
  • xw1985520
  • 2016年12月26日 22:27
  • 92

使用jquery选择器操作form元素

/***************************************/ //>jquery 关于包装集选择器的使用demo /*****************************...
  • zyb243380456
  • zyb243380456
  • 2012年07月25日 21:30
  • 9212
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery中Form相关操作
举报原因:
原因补充:

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