javascript表单处理具体实现代码(表单、链接、按钮)_

1、javascript表单处理具体实现代码(表单、链接、按钮)_ 这篇文章主要介绍了javascript表单处理具体实现代码，包括各种表单、链接、按钮控件介绍，感爱好的伴侣可以参考一下 本文实例处理各种表单, 以及链接,按钮的通用组件，教大家如何对javascript表单处理进行操作，具体内容如下 /* * Generic Form processing js * author Anthony.chen */ /* * Push button action btn_actiondata into form * If there is prescript , run the pre script

2、*/ use strict; /All ajax request are synchronized by default var ajaxSynchronized = true; /All ajax request will be unblock by default var 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 = ev

3、al(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

4、, v) var form = $(formEle); var post_data = form.data(post_data); if( post_data = undefined ) post_data = ; if( v = undefined ) delete post_datak; else post_datak = v; form.data(post_data,post_data); return true; ; /* * Bool Checkbox is special checkbox which needs to keep UNCHECK value * And post w

5、ith ajax form ,the form is in the parent */ var bool_checkbox = function() var ipt = $(this); var formEle = ipt.closest(form); var _check = p(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 */

6、 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) erval = interval; else erval = 1; var min = spin.attr(min); if( min

7、 ) 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

8、( 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 t

9、rue; ; /* * 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_scrip

10、t = 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_PROCESSI

11、NG) ); 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 Data var

12、 post_data; if(post_data = form.data(post_data) for (var k in post_data ) /if post_datak is array,need more to do formArray.push( name:k ,value: post_datak ); form.removeData(post_data); $.post(form.attr(action), formArray,function(json) if($(window).data(blockUI.isBlocked) = 1) $.unblockUI(); if(js

13、on.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:poi

14、nter,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.

15、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); el

16、se errHint.html(Html:text(_(E_FORM).show(); for(var p in json.data) var msg = json.datap; /Process hidden value,None hidden input should has refid refered to hidden value /Showing the Server message to ref var ele = form.find(type=hiddenname=+p+); if(ele.length) delete json.data.p; refid = ele.attr(

17、id); refname = form.find(hidden-id=+refid+).attr(name); json.datarefname=+msg; /Muti checkbox var ele = form.find(type=checkboxname=+p+); if(ele.length) delete json.data.p; refname = p+; json.datarefname=+msg; /END /* * Checking the hidden values */ form.data(validator).invalidate(json.data); ,json)

18、; 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 Reference var input = $(this); var refid = input.attr(hidden-id); var field = $(# + refi

19、d + ); /Setup the clear of Errmsg /Monitor the change event on ID element, remove error message /of Real input field.change(function() /Hidden input var hinput = $(this); /real input var rinput = $(hidden-id=+hinput.attr(id)+).first(); form.data(validator).reset(rinput) ); ); ; var validate_hidden_i

20、d = 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

21、(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

22、= $(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

23、) 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 each var successFunc = l.attr(success); if(successFunc) l.each(windowsucces

24、sFunc); if(json.data) retData = json.data; /IF Require warning before if( 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,b

25、order:3px solid #CC0000, overlayCSS: cursor:pointer ); $(.blockUI).addClass(blockwarn); else /$.unblockUI(); /Only could support Text errmsg if(hint) errHint.text(json.data).show(); else alert(json.data); ,json); return false; ; /* * Supporting the button base navigation * Only jump to new href */ v

26、ar 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(hre

27、f); 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.a

28、ttr(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.d

29、ata.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

30、URL */ var ajax_checkbox = function() event.preventDefault(); var action = $(this); var url = action.attr(url); var _check = p(checked); console.log(_check); var op ; if(_check) op = 1; else op = 0; $.get(url + op ,function(json) if(json.code = true) if(_check) p(checked,true); e

31、lse p(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(ro

32、wvalue); $(OPTION).append(_(L_SELECT).appendTo(_select); for(var _kid in _lovchildren) var _lov = _lovchildren_kidlov; $(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(v

33、alue=+_rowvalue0+).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 subsequent var _lovtree = _select.data(lovtree); var _rowval

34、ue = _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

35、= _selected.attr(k); /Getting Children list if(_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

36、_select); /Building the option list for(var _kid in _c_lovtree.c) var _lov = _c_lovtree.c_kidlov; $(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

37、) _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);

38、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 v

39、alue */ 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;

40、/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) o

41、pener.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 _fileU

42、pload = $(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

43、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

44、).fileupload( url: endpointurl, autoUpload:true, dataType:json, formData: sessionid: sid , paramName: Filedata, ).bind(fileuploaddone,windowcompleteFunc); ; /* * Matched errors with input * Only matched errors could be identified here */ var advance_validate = function(errors, event) var conf = this

45、.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

46、.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 container msg.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 f