html表单退出按钮代码,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');

$("").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.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) {

$("").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')}",

});

});