• 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,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 check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> 
   var ele = form.find("[type=check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>][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,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,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');

$("").append("{__('L_SELECT')}").appendTo(_select);
for(var _kid in _lovchildren){
var _lov = _lovchildren[_kid]['lov'];
$("").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("");
}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 = $('').data('lovtree',_c_lovtree).
data('rowvalue',_rowvalue).
attr('hidden-id',_hidden_id).attr('un',_un).
attr('name',un+''+_k);
$("").append("{__('L_SELECT')}").appendTo(_c_select);
//Building the option list
for(var _kid in _c_lovtree.c){
var _lov = _c_lovtree.c[_kid]['lov'];
$("").val(_lov.lov_id).append(_lov.v).attr('k',_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) {
  $("").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表单处理操作有所帮助，谢谢大家的阅读。

原文链接：https://www.f2er.com/js/48947.html

js处理处理处理表单表单

• 上一篇：js实现上传图片及时预览下一篇：基于javascript实现图片滑动效果

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获

事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...

作者：前端之家 时间：2021-02-22

搞懂js中小数运算精度问题原因及解决办法

js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...

作者：前端之家 时间：2021-02-22

搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...

作者：前端之家 时间：2021-02-22

前端对base64编码的理解，原生js实现字符base64编码

@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...

作者：前端之家 时间：2021-02-22

搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式

搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...

作者：前端之家 时间：2021-02-22

js判断浏览器是否支持webGL

起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...

作者：前端之家 时间：2021-02-14

js判断undefined和null

js判断undefined js判断null js判断null和undefined

作者：前端之家 时间：2021-02-14

将文字自动转为banner打印形式的工具

http://patorjk.com/software/taag/

作者：前端之家 时间：2021-02-14

聊一聊 bootstrap 的轮播图插件

今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...

作者：前端之家 时间：2021-02-14

js实现图片无缝循环跑马灯

html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...

作者：前端之家 时间：2021-02-14

编程分类

HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号

最新文章

• • Javascript中的事件冒泡与
• • 搞懂js中小数运算精度问题
• • 搞懂：前端跨域问题JS解决
• • 前端对base64编码的理解，
• • 搞懂：MVVM模型以及VUE中的
• • js实现横向跑马灯效果
• • js判断浏览器是否支持webG
• • js判断undefined和null
• • 将文字自动转为banner打印
• • 聊一聊 bootstrap 的轮播图

热门标签 更多 ►

关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作