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 default
var ajaxSynchronized = true;
//All ajax request will be unblock by default
var ajaxAutoUnblock = true;

/**
* 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');

$("

//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("");
}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 = $('