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);
        }
    });
}
时间: 2024-10-20 05:59:45

jquery常用表单操作的相关文章

Jquery常用表单元素操作总结

页面当中经常要做一些checkbox,radio,select,input等表单元素的操作.做为我这样的懒人早就该总结以下,免去用到的时候,不想从头写,又不得不去以前的代码中翻.下面的代码来自实际项目中,亲测可用.呵呵-- 一.checkbox 对checkbox的判断往往是checkbox有没有被勾选.也经常有一个复选框控制其它全部复选框的选中和取消选中.如下图: 页面左上角的复选框的选中控制表格中所有的复选框.代码如下: 为了操作方便,给控制全选的复选框增加一个id叫checkAll 下面的

基于jQuery的表单操作

1,文本框的聚焦和失焦 在对文本框进行操作时,通常为了提升用户体验,是用户的操作得到及时的反馈,会在文本框获得焦点时,让其颜色改变,然后在失去焦点时恢复为原来的样式,一般情况下,我们可以通过css的伪类选择器实现这个功能: <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

jQuery常用表单事件执行顺序

<input type="text" id="input"/> <script> // 点击测试 var input = document.getElementById("input"); $('input').hover(function(){ console.log("hover-in"); },function(){ console.log("hover-out"); });

我教女朋友学编程Html系列(6)—Html常用表单控件

做过网页的人都知道,html表单控件十分重要.基本上我们注册会员.登录用户,都需要填写用户名.密码,那些框框都是表单控件. 本来今天就想写一些常用的html表单控件,于是开始搜资料,找到了一个网页,作者的写作思路和我的基本相同,不过不足的是缺少效果图. 我打算结合着这位仁兄的文章补充一下,增加一些效果图,另外把一些新内容也补充进去,原文的地址是: HTML表单(Forms) 我站在这位仁兄的肩膀上写作,再增加一些东西,配上一些图,我想,效果应该很好,接着就跟着我来学习吧. HTML表单(Form

【锋利的jQuery】表单验证插件踩坑

和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在form中class类名中添加"required","email"等去作为验证时读取的参数. 4. 调用代码: $("#commentform").validate(); 很不幸,报错了.前端有个说法是学新不学旧,这里就不去深究原因,直接提供最新的写法

通过AJAX和PHP,提交JQuery Mobile表单

通过AJAX和PHP,提交JQuery Mobile表单   File name: callajax.php <?php $firstName = $_POST[firstName]; $lastName = $_POST[lastName]; echo("First Name: " . $firstName . " Last Name: " . $lastName); ?> File name: index.php <!DOCTYPE html&

jqm文件上传,上传图片,jqm的表单操作,jqm的ajax的使用,jqm文件操作大全,文件操作demo

最近在论坛中看到,在使用html5中上传图片或文件,出现各种问题.这一方面,我也一直没有做过,今天就抽出了一点时间来学习一下.现在的示例已经ok了,我就给大家分享一下,希望对大家有帮助. 好吧,我们先看看效果截图吧: 还行吧,来看页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <h

spring mvc Controller与jquery Form表单提交代码demo

1.JSP表单 <% String basePath = request.getScheme() + "://" + request.getServerName() +":"+ request.getServerPort() + request.getContextPath() + "/"; %> <script language="javascript" type="text/javascript

第一百六十八节,jQuery,表单选择器

jQuery,表单选择器 学习要点: 1.常规选择器 2.表单选择器 3.表单过滤器 表单作为 HTML 中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以 使用之前的常规选择器或过滤器,也可以使用 jQuery 为表单专门提供的选择器和过滤器来 准确的定位表单元素. 一.常规选择器 我们可以使用 id.类(class)和元素名来获取表单字段,如果是表单元素,都必须含有 name 属性,还可以结合属性选择器来精确定位. $('input').val(); //元素名定位,默认获取第一个