jquery常用表单操作
//js将表单序列化成对象
$.fn.serializeObject = function () {
var $els = $(this).find("[name]");
var formData = {};
var len = $els.length;
for (var i = 0; i < len; i++) {
var $item = $($els[i]);
var name = $item.attr("name");
var type = $item.attr("type");
if (type == "checkbox") {
formData[name] = $item.is(':checked');
}
else
{
formData[name] = $item.val();
}
}
return formData;
}; /*根据name给子元素的Text赋值*/
$.fn.SetChildsText = function (model) {
var el = this.find("[name]");
var elCount = el.length;
if (elCount > 0) {
for (var i = 0; i < elCount; i++) {
$itemEl = $(el[i]);
var name = $itemEl.attr("name");
var formatterFun = $itemEl.attr("data-formatter");
var value = model[name];
if (value != null) {
if (typeof (window[formatterFun]) == "function") {
value = window[formatterFun](value);
}
$itemEl.text(value);
}
else {
$itemEl.text("");
}
}
}
}; /*获取查询参数*/
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
} /**
* 绑定下拉框
* @param {any} selId:下拉框Id
* @param {any} url
* @param {any} idField
* @param {any} valueField
* @param {any} initValue:初始值
*/
function BindSelect(selId, url, idField, valueField, initValue) {
$.get(url, function (data) {
var len = data.length;
var selItems = [];
for (var i = 0; i < len; i++) {
selItems.push('<option value="' + data[i][idField] + '">' + data[i][valueField] + '</option>');
}
$("#" + selId).append(selItems);
if (initValue) {
$("#" + selId).val(initValue);
}
});
} /*表单赋值*/
function FormLoad(formId, data) {
var $form = $("#" + formId);
$.each(data, function (name, ival) {
var $oinput = $form.find("input[name=" + name + "]");
if ($oinput.attr("type") == "radio" || $oinput.attr("type") == "checkbox") {
$oinput.each(function () {
if (Object.prototype.toString.apply(ival) == '[object Array]') {// 是复选框,并且是数组
for (var i = 0; i < ival.length; i++) {
if ($(this).val() == ival[i])
$(this).attr("checked", "checked");
}
} else {
if ($(this).val() == ival)
$(this).attr("checked", "checked");
}
});
} else if ($oinput.attr("type") == "textarea") {// 多行文本框
$form.find("[name=" + name + "]").html(ival);
} else {
$form.find("[name=" + name + "]").val(ival);
}
});
}
jquery常用表单操作的更多相关文章
- 基于jQuery的表单操作
1,文本框的聚焦和失焦 在对文本框进行操作时,通常为了提升用户体验,是用户的操作得到及时的反馈,会在文本框获得焦点时,让其颜色改变,然后在失去焦点时恢复为原来的样式,一般情况下,我们可以通过css的伪 ...
- 基于JQuery的前端form表单操作
Jquery的前端表单操作: jquery提供了良好的方法封装,在一些基本的操作的时候,能节省很多的麻烦,其中,在具体使用时,form表单的数据提交是最频繁也最常见的前后数据交换方式,所以在前 ...
- jQuery Mobile 表单基础
jQuery Mobile 会自动为 HTML 表单添加优异的便于触控的外观. jQuery Mobile 表单结构 jQuery Mobile 使用 CSS 来设置 HTML 表单元素的样式,以使其 ...
- 通过AJAX和PHP,提交JQuery Mobile表单
File name: callajax.php <?php $firstName = $_POST[firstName]; $lastName = $_POST[lastName]; echo( ...
- 【锋利的jQuery】表单验证插件踩坑
和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...
- ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用
一.jQuery Form的其他api 1. formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...
- jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址
一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...
- jQuery实现表单验证
表单是网页的一个重要组成部分.本节做一个简单的表单提交网页然后利用jQuery实现表单的验证.后续的表单完善以及功能的完善会在以后的博客中给出. 效果图: 代码: <!DOCTYPE html ...
随机推荐
- 在向一个ArrayList中添加大量元素前,可以使用ensureCapacity方法来增加ArrayList的容量
参考http://www.jianshu.com/p/f174d49b391c ensureCapacity(),该方法就是 ArrayList 的扩容方法.在前面就提过 ArrayList 每次新增 ...
- 《Kubernetes权威指南》——网络原理
1 Kubernetes网络模型 基本原则:每个Pod都拥有一个独立IP,而且假定所有Pod都在一个可以直接连通的.扁平的网络空间中. 基于基本原则,用户不需要额外考虑如何建立Pod之间的连接,也不需 ...
- Hibernate懒加载解析
Hibernate懒加载解析 在Hibernate框架中,当我们要访问的数据量过大时,明显用缓存不太合适, 因为内存容量有限 ,为了减少并发量,减少系统资源的消耗,这时Hibernate用懒加载机制来 ...
- SaltStack 安装、简单配置和远程执行
1:安装 修改hosts文件,必须保证Master端和Minion端都有完整的FQDN名示例如下: vim /etc/hosts 192.168.31.101 node2 node2.crazylin ...
- #11 Python字典
前言 前两节介绍了Python列表和字符串的相关用法,这两种数据类型都是有序的数据类型,所以它们可以通过索引来访问内部元素.本文将记录一种无序的数据类型——字典! 一.字典与列表和字符串的区别 字典是 ...
- ElasticSearch入门简介
ElasticSearch是基于Apache Lucene的分布式搜索引擎, 提供面向文档的搜索服务.本文以6.2.3版本为例介绍ElasticSearch的应用. 本文首先介绍ElasticSear ...
- Android目录结构及作用
1.add-ons-->Google API .比如GoogleMaps 2.build-tools-->各版本SDK编译工具. 3.docs-->离线开发者文档Android SD ...
- Node Redis 入门
基础准备:Node.Js .npm或cnpm.redis安装 1.建立一个项目文件夹,这里命名 wxfc ,打开命令行输入 npm install redis . 因为没有创建package.json ...
- httpclient请求服务的各种方法实例
<!--话不多说,直接上代码--> import com.csis.ConfigManagerimport com.csis.io.web.DefaultConfigItemimport ...
- 关于eclipse项目的x号报错的一些问题
有些时候项目中并未有什么问题 但项目前会有一个X号报错且无法运行项目 我们不妨从jre和Tomcat的一些配置中找原因 1,首先查看jre的安装是否正确,可以看见并未出错 ,如果有问题,重新导入一下即 ...