html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

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

[ ] 已经帮助:人解决问题

本文实例处理各种表单, 以及链接,按钮的通用组件,教大家如何对javascript表单处理进行操作,具体内容如下gHuHTML5中文学习网 - HTML5先行者学习网

gHuHTML5中文学习网 - HTML5先行者学习网

/** * 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 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 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 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 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 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 #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 */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 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 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 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')}",      });});

以上就是本文的全部内容,希望对大家掌握javascript表单处理操作有所帮助,谢谢大家的阅读。gHuHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助