• 技术文章 >web前端 >js教程

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

    2016-05-16 15:01:32原创583
    本文实例处理各种表单, 以及链接,按钮的通用组件,教大家如何对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 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 = 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');
     
     $("
    1/1