首页 / 脚本样式 / JavaScript / 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;

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"）}",
   }）;
}）;