This article handles various forms, links and buttons in general. It teaches you how to operate JavaScript form processing. The specific content is as follows
/** * 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; } 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 return * 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 Data var post_data; if(post_data = form.data('post_data')){ for (var k in post_data ){ //if post_data[k] is array,need more to do formArray.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 support 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 return 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 #CC00000',}, 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 have refid referred to hidden value //Showing the Server message to ref var 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 checkbox var 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 Reference var 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 input var hinput = $(this); //real input var 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 return 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 function for each var successFunc = l.attr('success'); if(successFunc){ l.each(window[successFunc]); } 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',border:'3px solid #CC00000',}, 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 */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 return 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 submitted 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 subsequent var _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 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_select); //Building the option list for(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 sid = $(this).attr("sid"); var completeFunc = 'uploadComplete'; //Setup custom 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 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 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 Async ajaxAutoUnblock = 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')}", });});The above is all the content of this article. I hope it will be helpful for everyone to master the JavaScript form processing operations. Thank you for your reading.