1. 程式人生 > >jQuery自動給表單賦值

jQuery自動給表單賦值

/*
 * jquery 初始化form外掛,傳入一個json物件,為form賦值 
 * version: 1.0.0-2013.06.24
 * @requires jQuery v1.5 or later
 * Copyright (c) 2013
 * note:  1、此方法能賦值一般所有表單,但考慮到checkbox的賦值難度,以及表單中很少用checkbox,這裡不對checkbox賦值
 *		  2、此外掛現在只接收json賦值,不考慮到其他的來源資料
 *		  3、對於特殊的textarea,比如CKEditor,kindeditor...,他們的賦值有提供不同的自帶方法,這裡不做統一,如果專案中有用到,不能正確賦值,請單獨賦值
 */	
(function($){
	$.fn.extend({
		initForm:function(options){
			//預設引數
			var defaults = {
				jsonValue:"",
				isDebug:false	//是否需要除錯,這個用於開發階段,釋出階段請將設定為false,預設為false,true將會把name value打印出來
			}
			//設定引數
			var setting = $.extend({}, defaults, options);
			var form = this;
			jsonValue = setting.jsonValue;
			//如果傳入的json字串,將轉為json物件
			if($.type(setting.jsonValue) === "string"){
				jsonValue = $.parseJSON(jsonValue);
			}
			//如果傳入的json物件為空,則不做任何操作
			if(!$.isEmptyObject(jsonValue)){
				var debugInfo = "";
				$.each(jsonValue,function(key,value){
					//是否開啟除錯,開啟將會把name value打印出來
					if(setting.isDebug){
						alert("name:"+key+"; value:"+value);
						debugInfo += "name:"+key+"; value:"+value+" || ";
					}
					var formField = form.find("[name='"+key+"']");
					if($.type(formField[0]) === "undefined"){
						if(setting.isDebug){
							alert("can not find name:["+key+"] in form!!!");	//沒找到指定name的表單
						}
					} else {
						var fieldTagName = formField[0].tagName.toLowerCase();
						if(fieldTagName == "input"){
							if(formField.attr("type") == "radio"){
								$("input:radio[name='"+key+"'][value='"+value+"']").attr("checked","checked");
							} else {
								formField.val(value);
							}
						} else if(fieldTagName == "select"){
							//do something special
							formField.val(value);
						} else if(fieldTagName == "textarea"){
							//do something special
							formField.val(value);
						} else {
							formField.val(value);
						}
					}
				})
				if(setting.isDebug){
					alert(debugInfo);
				}
			}
			return form;	//返回物件,提供鏈式操作
		}
	});
})(jQuery)

相關推薦

jQuery自動

/* * jquery 初始化form外掛,傳入一個json物件,為form賦值 * version: 1.0.0-2013.06.24 * @requires jQuery v1.5 or later * Copyright (c) 2013 * note:

html 和 時間戳 轉換

min return 輸入 cond rip bag val minute onload <script> window.onload = function () { var str; //

js獲取form單數據和form

input orm htm for 獲取 pro 多行文本框 serialize PE $.fn.extend({// 調用方式:$("xxxxx").getform(); getform: function () {

jquery 實現元素顏色

<script> // 顏色陣列 var color=['#fdbc0d','#01cecb','#0287fe','#fe7293']; $("li").each(function(index,item){ item.style.backgroundColor=c

微信小程式(十九)——資料提交和小程式(組裝資料)

前端表單程式碼.wxml: <form > <view class='form-box'> <view class='form-item'>

JQuery動態LayUI table

以下為html程式碼: 效果如下所示: 區域 報告數 var tableData = data.rows; //回撥函式獲取後臺返回

jquery input text元素,js修改

<script> function changestatus(money){ //$("#money").val(money);//val()這種寫法有時會失效,特別是他的父元素是do

jQuery設置

title utf-8 cli click attr button selected back meta <!DOCTYPE html> <html lang="en"> <head> <meta charset=

EasyUI把datagrid的

$('#infoForm${INDEX}').form('load', rowToDto(pageConfig${INDEX}.infoName, row)); function rowToDt

基於JQuery實現元素的回寫

spl sel || etc oos min javascrip odi tar form.jsp: <%@ page language="java" import="java.util.*" pageEncoding="GB2312"%> <!DO

js--獲取/文字innerText/textContent、innerHTML的區別,獲取;js事件物件屬性target於currentTarget

  <body> <div id="box_text"> <p style="color:hotpink;">muzidigbig</p> <p style="color:pink">

【轉載】用jqueryselect option

var dataList = [ "6211125886667895", "6211125886667892", "6211125886667897" ]; for (var i = 0; i < dataList.l

解決JQuery的ajax不能全域性變數的問題

今天在使用ajax給全域性變數賦值的時候發現無論用什麼方法都不行,下面先貼上問題程式碼: function isRetake(paperId) { var res = 1; // 傳送ajax請求 $.ajax({ async:false, url : bas

JQuery 動態建立,並自動提交

前言:寫這個是為了實現使用cookie進行自動登入的功能, 下面的程式碼是一個元素一個元素進行建立和賦值的, (可以嘗試下將所有的html程式碼(form、input)全部拼好以後放到${ } 中,再進行提交。) submit的時候注意下寫法,就這樣 //獲取cookie中的

JQuery提交Form,獲取返回

$.post("/Feedback/wtdata/save.do", $("#wdsform").serialize(), function(data){ alert(data.message); }

jquery 文字框

$("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!&l

[微信小程式]提交返回成功後自動清空

 有問題可以掃碼加我微信,有償解決問題。承接小程式開發。 微信小程式開發交流qq群   173683895  、 526474645 ; 正文: 實現思路: 給每一個input繫結相同的value

jquery批量提交 和批量設定

批量設定表單的值 function setInfo(data){ //簡便方法 $('#info_form').find('[name]').each(function() {

JQUERY獲取formtext,areatext,radio,checkbox,select

jquery取得text,areatext,radio,checkbox,select的值,以及其他一些操作;1.假如我們有如下頁面 <inputtype="text"name="textname"id="text_id"value=""> <!--其餘的

jQuery得到form裡面文字框、密碼框、選框、下拉框、複選框的

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>通過jQuery獲取表