首页 / 脚本样式 / JavaScript / javascript表单处理具体实现代码（表单、链接、按钮）

/** * Generic Form processing js * @author Anthony.chen */ /** * Push button action [btn_action]data into form * If there is prescript , run the pre script */"use strict";//All ajax request are synchronized by defaultvar ajaxSynchronized = true;//All ajax request will be unblock by defaultvar ajaxAutoUnblock = true; var ajax_action_button = function （e）{ var btn = $（this）; //Add prescript var pre_script; if（pre_script = btn.attr（"pre_script"））{var ret = eval（pre_script）;if（ret==false）{ return false;} } var btn_action = btn.attr（"value"）; if（btn_action）{$（this）.closest（"form"）.data（"btn_action", { name:"btn_action",value:btn_action } ）; }}; /** * Update the extra form data in FormElement with Form element, Key and Value */var ajax_update_post_data = function（formEle, k, v）{ var form = $（formEle）; var post_data = form.data（"post_data"）; if（ post_data == undefined ）{post_data = {}; }if（ v == undefined ）{delete post_data[k]; }else{post_data[k] = v; } form.data（"post_data",post_data）; return true;}; /** * Bool Checkbox is special checkbox which needs to keep UNCHECK value* And post with ajax form ,the form is in the parent */var bool_checkbox = function（）{ var ipt = $（this）; var formEle = ipt.closest（"form"）; var _check = ipt.prop（"checked"）; if（_check）{ajax_update_post_data（formEle,ipt.attr（"name"））; }else{ajax_update_post_data（formEle,ipt.attr（"name"）,"f"）; }}; /** * Init the spin number */var spin_number = function（）{ var spin = $（this）; var config = { lock:true, imageBasePath: "{webpath}/css/images/spin/", btnCss: null, txtCss: null, btnClass:"spin_btn", }; var interval = spin.attr（"interval"）; if（interval）{config.interval = interval; }else{config.interval = 1; }var min = spin.attr（"min"）; if（ min ）{config.min = min; }var max = spin.attr（"max"）; if（ max ）{config.max = max; }spin.spin（config）; return true;}; /** * Init the date input */var date_input = function（）{ var ipt = $（this）; var config = {offset:[4,0],selectors:true,lang: "{lang}",firstDay : 1,format: "yyyy-mm-dd", }; var min = ipt.attr（"min"）; if（ min ）{config.min = min; }var min = ipt.attr（"min"）; if（ min ）{config.min = min; }ipt.dateinput（config）; return true;};/** * Init the timePicker */var time_picker = function（）{ var ipt = $（this）; var config = { };var step = ipt.attr（"step"）; if（ step ）{config.step = step; }ipt.timePicker（ config ）; return true;}; /** * Generic Ajax Form post function * If btn_action is set, then add data into form * if returi is set, redirect to returi * if reload is set, reload* else Show block message * * the form will be validated. */var ajax_form_post = function（e）{ var form = $（this）; var pre_script; if（pre_script = form.attr（"pre_script"））{var ret = eval（pre_script）;if（ret==false）{ return false;} } var errHint = form.find（".formError"）.first（）; if（errHint.size（） == 0）{errHint = $（"#pageError"）; } errHint.text（""）.hide（）;//Cleanup the pageError if（！e.isDefaultPrevented（））{//Hide all .formError$.blockUI（{ message:"{__（"L_PROCESSING"）}" }）;var formArray = form.serializeArray（）;var btn_action_data;var btn_action;if（btn_action_data = form.data（"btn_action"））{ formArray.push（btn_action_data）; form.removeData（"btn_action"）; btn_action = btn_action_data.value;}else{ btn_action = "";} console.log（"btn action:"+btn_action）;//Add extra Datavar post_data;if（post_data = form.data（"post_data"））{ for （var k in post_data ）{//if post_data[k] is array,need more to doformArray.push（ { name:k ,value: post_data[k] } ）; } form.removeData（"post_data"）;} $.post（form.attr（"action"）, formArray,function（json）{if（$（window）.data（"blockUI.isBlocked"） == 1）{ $.unblockUI（）;}if（json.code === true）{ var returi = ""; var retData = "{__（"L_PROCESSED"）}！"; if（json.data）{retData = json.data;}//TODO Add suppport to allow save and stay if（btn_action =="reqonly"）{if（returi = form.attr（"returi"））{ $（window）.data（"blockUI.returi",returi）; ajaxAutoUnblock = false;}$.blockUI（{ message:retData, css:{ cursor:"pointer",padding:"4px",border:"3px solid #CC0000",}, overlayCSS:{ cursor:"pointer" } }）;$（".blockUI"）.addClass（"blockwarn"）; } //if there is returi set, then return to uri else if（returi = form.attr（"returi"））{window.location = returi; //Else if reload is set, then will be reload }else if（form.attr（"reload"）！=undefined）{window.location.reload（）; }else{$.blockUI（{ message:retData }）;$.unblockUI（）; }}else{ if（typeof （json.data.errmsg） == "string"）{errHint.html（json.data）.show（）;//$.blockUI（{ message:json.data, css:{ cursor:"pointer",padding:"4px",border:"3px solid #CC0000",}, overlayCSS:{ cursor:"pointer" } }）;//$（".blockUI"）.addClass（"blockwarn"）; }else{errHint.html（"{Html::text（__（"E_FORM"））}"）.show（）;for（var p in json.data）{ var msg = json.data[p]; //Process hidden value,None hidden input should has refid refered to hidden value //Showing the Server message to refvar ele = form.find（"[type=hidden][name="+p+"]"）; if（ele.length）{delete json.data.p;refid = ele.attr（"id"）;refname = form.find（"[hidden-id="+refid+"]"）.attr（"name"）;json.data[refname]=+msg; }//Muti checkboxvar ele = form.find（"[type=checkbox][name=""+p+"[]"]"）; if（ele.length）{delete json.data.p;refname = p+"[]";json.data[refname]=+msg; } //@END} } /** Checking the hidden values */ form.data（"validator"）.invalidate（json.data）;} },"json"）;e.preventDefault（）; }else{errHint.html（"{Html::text（__（"E_FORM"））}"）.show（）; }}; /*** * Reset the input */var ajax_post_form_hidden = function（）{ var form = $（this）; form.find（"[hidden-id]"）.each（function（）{ //Clear the message of Referencevar input = $（this）; var refid = input.attr（"hidden-id"）; var field = $（"#" + refid + ""）;//Setup the clear of Errmsg //Monitor the change event on ID element, remove error message//of Real input field.change（function（）{ //Hidden inputvar hinput = $（this）;//real inputvar rinput = $（"[hidden-id="+hinput.attr（"id"）+"]"）.first（）;form.data（"validator"）.reset（rinput）}）; }）;}; var validate_hidden_id = function（input） { var refid = input.attr（"hidden-id"）; var field = $（"#" + refid + ""）;var msg = field.attr（"msg"）; if（ ！msg ）{msg = "{__（"E_NOT_EMPTY"）}"; }return field.val（） ? true : msg; }; var data_equals_validate = function（input） { var field; var name = input.attr（"data-equals"）; field = this.getInputs（）.filter（"[name=" + name + "]"）; return input.val（） == field.val（） ? true : [name];}; /** * Ajax request through link * If confirm is set, confirm before send request * Support returi and reload * Else show block message */var ajax_link_req = function（）{ var l = $（this）; var hint = l.attr（"hint"）; if（hint）{var errHint = $（l.attr（"hint"））;errHint.text（""）.hide（）; } //If the confirm message is set, then should be confirmed from client if（l.attr（"confirm"））{if（！confirm（l.attr（"confirm"）））{ return false;} }$.blockUI（{ message:"{__（"L_PROCESSING"）}" }）;var pre_script; if（pre_script = l.attr（"pre_script"））{var ret = eval（pre_script）;if（ret==false）{ return false;} }var block = l.attr（"block"）; if（block ！= undefined）{ajaxAutoUnblock = false ; }$.get（l.attr（"href"）,function（json）{ if（json.code == true）{var retData = "{__（"L_PROCESSED"）}！";var returi;//If success to execute funtion for eachvar successFunc = l.attr（"success"）;if（successFunc）{ l.each（window[successFunc]）;} if（json.data）{ retData = json.data; }//IF Require warning beforeif（ l.attr（"value"） == "reqonly"）{ alert（retData）;}else if（returi = l.attr（"returi"））{ window.location = returi;}else if（l.attr（"reload"）！=undefined）{ window.location.reload（）;}else{ $.blockUI（{ message:retData, css:{ cursor:"pointer",padding:"4px",border:"3px solid #CC0000",}, overlayCSS:{ cursor:"pointer" } }）; $（".blockUI"）.addClass（"blockwarn"）;} }else{//$.unblockUI（）;//Only could support Text errmsgif（hint）{ errHint.text（json.data）.show（）;}else{ alert（json.data）;} }},"json"）; return false;}; /** * Supporting the button base navigation * Only jump to new href */var btn_nav = function（）{ var input = $（this）; var href = input.attr（"href"）; if（href）{window.location = href; }else{alert（"Href not set"）; } return false;}; /** * Support button base Ajax get method request * support returi and reload */var btn_req = function（）{ var input = $（this）; var href = input.attr（"href"）;var hint = input.attr（"hint"）; if（hint）{var errHint = $（hint）.first（）;if（errHint.size（） == 0）{ errHint = $（"#pageError"）;}errHint.text（""）.hide（）; }var block = input.attr（"block"）; if（block ！= undefined）{ajaxAutoUnblock = false }$.get（href,function（json）{ if（json.code == true）{ var returi; if（returi = input.attr（"returi"））{window.location = returi; } else if（input.attr（"reload"）！=undefined）{window.location.reload（）; }else{ var retData = "{__（"L_PROCESSED"）}！"; if（json.data）{retData = json.data;} $.blockUI（{ message:retData,css:{ cursor:"pointer" },overlayCSS:{ cursor:"pointer" } }）;} }else{if（hint）{ $.unblockUI（）; errHint.html（json.data.errmsg）.show（）;}else{ $.blockUI（{ message:json.data.errmsg, css:{ cursor:"pointer",padding:"4px",border:"3px solid #CC0000",}, overlayCSS:{ cursor:"pointer" } }）; $（".blockUI"）.addClass（"blockwarn"）;} } },"json"）; return false;}; /** * Generic Ajax Checkbox * The default action is prevented and submit real request through URL */var ajax_checkbox = function（）{ event.preventDefault（）; var action = $（this）; var url = action.attr（"url"）; var _check = action.prop（"checked"）; console.log（_check）; var op ;if（_check）{op = "1"; }else{op = "0"; } $.get（url + op ,function（json）{if（json.code == true）{if（_check）{ action.prop（"checked",true）;}else{ action.prop（"checked",false）;}return true; }else{return false; } },"json"）;};/** * Crete Root picklist*/var picklistinit = function（）{ var _select = $（this）; var _hidden_id = _select.attr（"hidden-id"）; var _un = _select.attr（"un"）; var _lovchildren = _select.data（"lovtree"）.c; var _rowvalue = _select.data（"rowvalue"）;$（"<OPTION>"）.append（"{__（"L_SELECT"）}"）.appendTo（_select）; for（var _kid in _lovchildren）{var _lov = _lovchildren[_kid]["lov"];$（"<OPTION>"）.val（_lov.lov_id）.append（_lov.v）.attr（"k",_lov.id）.attr（"is_leaf",_lov.is_leaf）.appendTo（_select）; } _select.change（picklistchange）;//Select the list if（_rowvalue）{_select.find（"[value="+_rowvalue[0]+"]"）.prop（"selected",true）;_select.change（）; } return true;}; /** * Select pick list */var picklistchange = function （）{ var _select = $（this）; var _hidden_id = _select.attr（"hidden-id"）; var _un = _select.attr（"un"）;//Remove all the subsequentvar _lovtree = _select.data（"lovtree"）; var _rowvalue = _select.data（"rowvalue"）;_select.nextAll（）.remove（）;//This is value of Current Select var _selected = _select.find（":selected"）; if（_selected.attr（"is_leaf"）=="{DB::T}"）{$（"#"+_hidden_id）.val（_select.val（））;_select.after（"<img src="/s.gif" class="sprite_global successimg"/>"）; }else{var _val = _select.val（）;var _k = _selected.attr（"k"）; //Getting Children listif（_lovtree.c[_k].c == undefined）{ return false;}var _c_lovtree = _lovtree.c[_k]; var _c_select = $（"<SELECT>"）.data（"lovtree",_c_lovtree）. data（"rowvalue",_rowvalue）. attr（"hidden-id",_hidden_id）.attr（"un",_un）. attr（"name",_un+"_"+_k）;$（"<OPTION>"）.append（"{__（"L_SELECT"）}"）.appendTo（_c_select）;//Building the option listfor（var _kid in _c_lovtree.c）{ var _lov = _c_lovtree.c[_kid]["lov"]; $（"<OPTION>"）.val（_lov.lov_id）.append（_lov.v）.attr（"k",_lov.id）.attr（"is_leaf",_lov.is_leaf）.appendTo（_c_select）; //Insert after _select.after（_c_select）; //Onchange}_c_select.change（picklistchange）; if（_rowvalue）{ _c_select.find（"[value="+_rowvalue[_k]+"]"）.prop（"selected",true）; _c_select.change（）;} }}; var lookup_new = function（）{ var lookup = $（this）; var pre_script; if（pre_script = lookup.attr（"pre_script"））{var ret = eval（pre_script）;if（ret==false）{ return false;} } var url = lookup.attr（"url"）; if（！url）{alert（"url not set"）;return false; } var height = lookup.attr（"h"）; if（！height）{height = 600; } var width = lookup.attr（"w"）; if（！width）{width = 800; } window.open（url,"pselect","scrollbars=yes,menubar=no,height="+height+",width="+width+",resizable=yes,toolbar=no,location=no,status=no"）; return false;}; /** * Lookup new value for hidden value */var parent_lookup = function（）{ var lookup = $（this）; var pid = opener.$（"#" + lookup.attr（"pid"））; if（！pid.length）{alert（lookup.attr（"pid"）+ " not found"）;return false; } var pname = opener.$（ "#" + lookup.attr（"pname"））; if（！pname.length）{alert（lookup.attr（"pname"）+ " not found"）;return false; }var aft_script; //Run current after script if（aft_script = lookup.attr（"aft_script"））{window.eval（aft_script）; }pid.val（$（this）.attr（"refid"））;//Only operation from opener could trigger change event pid.change（）; pname.val（$（this）.attr（"refvalue"））;pname.change（）; //Parent after_script if（aft_script = pname.attr（"aft_script"））{opener.window.eval（aft_script）; } if（aft_script = pid.attr（"aft_script"））{opener.window.eval（aft_script）; } window.close（）;}; /** * Default upload complete *///var uploadComplete = function（event, id, fileName, responseJSON） { var uploadComplete = function（e, data） {//To be replaced by jquery uploader var _fileUpload = $（this）; //console.log（_fileUpload）; //console.log（data.result）; if（_fileUpload.attr（"reload"）！=undefined）{window.location.reload（）; }}; /** * File upload function ,the following attribute to control action of upload * "endpoint" as upload url * "sid" as session id * "complete" optional to configure the custom upload complete function */var genericUpload = function（dom）{ var endpointurl = $（this）.attr（"endpoint"）; var sid = $（this）.attr（"sid"）; var completeFunc = "uploadComplete"; //Setup custome complete function var cusComplete = $（this）.attr（"complete"）; if（cusComplete）{completeFunc = cusComplete; }$（this）.fileupload（{url: endpointurl,autoUpload:true,dataType:"json",formData: [{ "sessionid": sid }],paramName: "Filedata", }）.bind（"fileuploaddone",window[completeFunc]）;}; /** * Matched errors with input* Only matched errors could be identified here */var advance_validate = function（errors, event） { var conf = this.getConf（）; // loop errors $.each（errors, function（index, error） { // add error class into input Dom element var input = error.input; input.addClass（conf.errorClass）;// get handle to the error container var msg = input.data（"msg.el"）; // create Error data if not present, and add error class for input // "msg.el" data is linked to error message Dom Element if （！msg） {//msg = $（conf.message）.addClass（conf.messageClass）.insertAfter（input）; msg = $（conf.message）.addClass（conf.messageClass）.appendTo（input.parent（））; input.data（"msg.el", msg）; } // clear the containermsg.css（{visibility: "hidden"}）.find（"span"）.remove（）;// populate messages $.each（error.messages, function（i, m） {$（"<span/>"）.html（m）.appendTo（msg）;}）;// make sure the width is not full body width so it can be positioned correctly if （msg.outerWidth（） == msg.parent（）.width（）） {msg.add（msg.find（"span"））; } //insert into correct position （relative to the field）msg.css（{ visibility: "visible"}） .fadeIn（conf.speed）; msg.parent（）.addClass（"colError"）; }）;}; var advance_inputs = function（inputs） { var conf = this.getConf（）; inputs.removeClass（conf.errorClass）.each（function（） { var msg = $（this）.data（"msg.el"）; if （msg） { msg.hide（）; msg.parent（）.removeClass（"colError"）; } }）; if（$（".colError"）.size（） == 0）{ var form = $（this）;var errHint = form.find（".formError"）.first（）;if（errHint.size（） == 0）{ errHint = $（"#pageError"）; errHint.text（""）.hide（）;} }}; /** * When refname is contained to be selected */var checkall = function（） {var check = $（this）; var refname = check.attr（"refname"）; if（refname）{if（check.prop（"checked"））{ $（"input[name*=""+refname+""]"）.prop（"checked",true）;}else{ $（"input[name*=""+refname+""]"）.prop（"checked",false）;} }var refclass = check.attr（"refclass"）; if（refclass）{if（check.prop（"checked"））{ $（"input."+refclass）.prop（"checked",true）;}else{ $（"input."+refclass）.prop（"checked",false）;} }}; /** * Setup readonly checkbox*/var readonlyCheck = function（e）{ e.preventDefault（）;return false;}; /** * Select List disable */var readonlySelect = function（）{ $（this）.prop（"disabled", true）; };$（document）.ready（function（） {$（document）.ajaxStart（function（）{ //Clean up the Ajax request Page Level Error $（"#pageError"）.text（""）.hide（）; //Clean up teh Form Error $（".formError"）.text（""）.hide（）; //Blocking all ajax processing if（ajaxSynchronized）{$.blockUI（{ message:"{__（"L_PROCESSING"）}" }）;} }）;$（document）.ajaxStop（function（）{ if（ajaxSynchronized）{if（$（window）.data（"blockUI.isBlocked"） == 1）{ if（ajaxAutoUnblock）{$.unblockUI（）; }else{ajaxAutoUnblock = true; }} }else{//Change back to default Synchronized mode from AsyncajaxAutoUnblock = true;ajaxSynchronized = true; } }）;$（document）.ajaxError（function（event, request, settings）{ alert（"Ajax Request Error！ URL="+settings.url）; if（ajaxSynchronized）{if（$（window）.data（"blockUI.isBlocked"） == 1）{ if（ajaxAutoUnblock）{$.unblockUI（）; }else{ajaxAutoUnblock = true; }} }else{ajaxAutoUnblock = true;ajaxSynchronized = true; } }）; //Force unblockUI$（document）.click（function（）{if（$（window）.data（"blockUI.isBlocked"） == 1）{ $.unblockUI（）; var returi = $（window）.data（"blockUI.returi"）; if（returi）{window.location = returi; }}}）; $.tools.validator.addEffect（"advanced", advance_validate,advance_inputs）;$.tools.validator.fn（"[data-equals]", { "{lang}":"{__（"E_NOTEQUAL"）}" }, data_equals_validate ）;$.tools.validator.fn（"[hidden-id]",validate_hidden_id）; $（".ajax_form_post"）.validator（{ lang:"{lang}",effect:"advanced" }） .submit（ ajax_form_post ）;$（".ajax_form_post"）.each（ajax_post_form_hidden）;$（".spin_number"）.each（spin_number）;$（".date_input"）.each（date_input）;$（".time_picker"）.each（time_picker）; $（".ajax_link_req"）.click（ajax_link_req）;//Client validation for the hidden ID $（".require_validate"）.validator（{ lang:"{lang}",effect:"advanced" }）; $（".btn_nav"）.click（ btn_nav ）;$（".btn_req"）.click（ btn_req ）;$（"button.btn_action"）.click（ajax_action_button）;$（".lookup_new"）.click（lookup_new）;$（".parent_lookup"）.click（parent_lookup）;$（".ajax_checkbox"）.click（ajax_checkbox）;$（".bool_checkbox"）.click（bool_checkbox）;$（".checkall"）.click（checkall）;$（"img[rel]"）.overlay（）;$（"input[tip]"）.tooltip（{ position:"center right"}）; //At last we will do localize$.tools.validator.localize（"{lang}", { "*": "{__（"E_ALL"）}", ":email" : "{__（"E_EMAIL"）}", ":number" : "{__（"E_DECIMAL"）}", ":url": "{__（"E_URL"）}", "[max]": "{__（"E_MAX_LENGTH"）}", "[min]": "{__（"E_MIN_LENGTH"）}", "[required]" : "{__（"E_NOT_EMPTY"）}", }）;}）;