Dieser Artikel behandelt verschiedene Formen, Links und Schaltflächen im Allgemeinen. Es unterrichtet Ihnen, wie Sie die Verarbeitung von JavaScript -Formular betreiben. Der spezifische Inhalt ist wie folgt
/** * generische Formverarbeitung JS * @Author Anthony.chen *//** * Drucktaste Aktion [btn_action] in Form *, wenn es vorgeschrieben ist. var ajax_action_button = function (e) {var btn = $ (this); // Prescript var pre_script hinzufügen; 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}); }}; /** * Aktualisieren Sie die zusätzlichen Formulardaten in Formelement mit Formularelement, Schlüssel und Wert */var ajax_update_post_data = Funktion (Formel, k, v) {var Form = $ (Formel); var post_data = form.data ('post_data'); if (post_data == undefined) {post_data = {}; } if (v == undefiniert) {post_data [k]; } else {post_data [k] = v; } form.data ('post_data', post_data); Return true;}; /** * BOOL -Kontrollkästchen ist ein spezielles Kontrollkästchen, das den Deaktivierungswert * und das Posten mit AJAX -Formular beibehalten muss. Das Formular befindet sich im übergeordneten */var bool_checkbox = function () {var ipt = $ (this); var formele = ipt.closest ("Form"); var _check = ipt.prop ("geprüft"); if (_check) {ajax_update_post_data (formele, ipt.attr ('name')); } else {ajax_update_post_data (formele, ipt.attr ('name'), 'f'); }}; /** * init der Spin -Nummer */var spin_number = function () {var spin = $ (this); var config = {lock: true, imageBasepath: '{webpath}/css/bilder/spin/', btncss: null, txtcss: null, btnClass: 'spin_btn',}; var intervall = spin.attr ('intervall'); if (intervall) {config.interval = intervall; } 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 der Datumseingabe */var date_input = function () {var ipt = $ (this); var config = {offset: [4,0], selektoren: true, lang: '{lang}', firstday: 1, format: 'yyyy-mm-dd',}; var min = ipt.attr ('min'); if (min) {config.min = min; } ipt.dateInput (config); Return true;}; /** * init timePicker */var time_picker = function () {var ipt = $ (this); var config = {}; var Step = ipt.attr ("Schritt"); if (Schritt) {config.step = Schritt; } ipt.timepicker (config); Return true;}; /** * generisches AJAX -Formular post -Funktion * Wenn btn_action eingestellt ist, fügen Sie Daten in Form hinzu * Wenn Returi eingestellt ist, leiten Sie die Rückgabe aus * Wenn das Nachladen eingestellt ist, laden Sie die Blocknachricht an. * * Das Formular wird validiert. */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 (errlhint.size () == 0) {errHint = $ ("#pageError"); } errlhint.text (''). hide (); // PageError if (! E.isdefaultPrevented ()) {// alle .-FirmalError $ .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); // zusätzliche Daten hinzufügen var post_data; if (post_data = form.data ('post_data')) {for (var k in post_data) {// if post_data [k] ist Array, brauche mehr, um formArray.push ({Name: k, k, post_data [k]}); } Form.Removedata ('post_data'); } $ .post (form.attr ('action'), formArray, function (json) {if ($ ($ ($) .data ('blockui.isblocked') == 1) {$ .unblockui ();} if (json.code === true) {var returi = "); if (json.data) {retdata = json.data; $ .blockui ({message: retdata, css: {cursor: 'pointer', padding: '4px', border: '3px solid #cc0000',}, Overlaycss: {Cursor: 'Zeiger'}); if (returi = form.attr ('returi') {window.location = returi; if (typeof (json.data.errmsg) == 'String') {errhaint.html (json.data) .show (); Cursor: 'Pointer'}}); Wert, keine versteckte Eingabe sollte auf versteckten Wert bezogen werden // Die Servermeldung an Ref var ele = Form.Find ("Typ = Hidden] [name ="+P+"]"); Form.Find ("[Hidden-ID ="+RefID+"]). Attr (" Name "); JSON.DATA [Refname] =+msg; E.PreventDefault (); } else {errrhrint.html ("{html :: text (__ ('e_form')}"). show (); }}; /****Die Eingabe zurücksetzen*/var ajax_post_form_hidden = function () {var form = $ (this); Form.find ("[Hidden-id]"). Jede (Funktion () {// Die Meldung von Referenz var input = $ (this); var refID = input.attr ("Hidden-id"); var field = $ ("#"#" + Refid +" "); // Setup Das Clear-ERMMSG // ERELMAGE Die Änderungsereignis. Hinput = $ (this); }); 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 ()? Richtig: MSG; }; var data_equals_validate = function (input) {var field; var name = input.attr ("data-äquals"); field = this.getInputs (). filter ("[name =" + name + "]"); return input.val () == field.val ()? Richtig: [Name];}; /** * AJAX -Anforderung über Link * Wenn Bestätigung festgelegt ist, bestätigen Sie vor der Sendeanforderung * Support Return and Reload * sonst Blocknachricht anzeigen */var ajax_link_req = function () {var l = $ (this); var fIST = L.ATTR ('Hinweis'); if (fIST) {var errhlhin = $ (l.attr ('tipp')); Errhint.Text (''). hide (); } // Wenn die Bestätigungsnachricht festgelegt ist, sollte dann vom Client bestätigt werden, wenn (l.attr ('bestätigen') {if (! Bestätigen (l.attr ('bestätigen')) {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! = undefiniert) {ajaxautounblock = false; } $ .get (l.attr ('href'), function (json) {if (json.code == true) {var retdata = "{__ ('l_processed')}!"; var returi; // if Erfolgsfunktion für jeden var Successfunc = l.attr ('Erfolg (' Erfolg); if (json.data) {retdata = json.data; window.location.reload (); } else {// $. UnBlockui (); return false;}; /** * Unterstützung der Schaltflächenbasisnavigation * Springe nur zu New HREF */var btn_nav = function () {var input = $ (this); var href = input.attr ("href"); if (href) {window.location = href; } else {alert ("href nicht gesetzt"); } return false;}; /** * Support -Taste Basis AJAX GET -Methodenanforderung * Support Return and Reload */var btn_req = function () {var input = $ (this); var href = input.attr ("href"); var fIST = input.attr ('Hinweis'); if (filt) {var errhlhin = $ (Hinweis) .First (); if (errlhint.size () == 0) {errHint = $ ("#pageError"); } errlhint.text (''). hide (); } var block = input.attr ('block'); if (block! window.location.reload (); }); #CC0000 ',}, OverlayCSS: {Cursor:' Pointer '}}); return false;}; /** * generisches AJAX -Kontrollkästchen * Die Standardaktion wird verhindert und reale Anforderung über URL */var ajax_checkbox = function () {event.preventDefault (); var action = $ (this); var url = action.attr ('url'); var _check = action.prop ("geprüft"); 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; /** * 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); für (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); // Wählen Sie die Liste if (_rowValue) {_select.find ("[value ="+_ rowValue [0]+"]"). Prop ("ausgewählt", true); _Select.change (); } return true;}; /** * Wählen Sie die Liste aus */var picklistchange = function () {var _select = $ (this); var _hidden_id = _select.attr ('Hidden-id'); var _un = _select.attr ('un'); // Entfernen Sie alle nachfolgenden var _lovtree = _select.data ('lovtree'); var _rowValue = _Select.data ('rowValue'); _Select.NextAll (). remove (); // Dies ist Wert der aktuellen Auswahl var _selected = _Select.find (': ausgewählt'); if (_selected.attr ('is_leaf') == "{db :: t}") {$ ("#"+_ hidden_id) .val (_select.val ()); _Select.after ("<img src = '/s.gif' class = 'Sprite_Global EUFTRICT'/>"); } else {var _val = _select.val (); var _k = _selected.attr ('k'); // Kinderliste erhalten if (_lovtree.c [_k] .c == undefined) {return false; } var _c_lovtree = _lovtree.c [_k]; var _c_select = $ ('<Select>'). Data ('lovtree', _ c_lovtree). Daten ('RowValue', _ RowValue). attr ('Hidden-id', _ Hidden_id) .attr ('un', _ un). attr ('name', _ un+'_'+_ k); $ ("<option>"). Append ("{__ ('l_select')}"). AppendTo (_c_select); // Erstellen der Optionsliste für (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); // nach _select.after (_c_select) einfügen; // onchange} _c_select.change (Picklistchange); if (_rowValue) {_c_select.find ("[value ="+_ rowValue [_k]+"]"). prop ("ausgewählt", true); _c_select.change (); }}}; var sookup_new = function () {var sookup = $ (this); var pre_Script; if (pre_script = suchup.attr ("pre_script")) {var ret = eval (pre_script); if (ret == false) {return false; }} var url = suchup.attr ("url"); if (! url) {alert ('url nicht gesetzt'); false zurückgeben; } var height = suchup.attr ('H'); if (! Höhe) {Höhe = 600; } var width = suchup.attr ('w'); if (! width) {width = 800; } window.open (URL, "pSelect", "ScrollBars = Ja, MenuBar = nein, Höhe ="+Höhe+", width ="+width+", resizable = yes, Symbolleiste = nein, locum = nein, Status = nein"); false zurückgeben; }; /** * Suchen Sie nach dem neuen Wert für versteckten Wert */var parent_lookup = function () {var sookup = $ (this); var pid = opener. $ ("#" + such.attr ('pid')); if (! pid.length) {alert (Lookup.attr ('pid')+ "nicht gefunden"); false zurückgeben; } var pname = opener. $ ("#" + suchup.attr ('pname')); if (! false zurückgeben; } var aft_script; // aktuell nach dem Skript ausführen if (acht_script = shoughup.attr ('AFT_Script') {window.eval (acht_script); } pid.val ($ (this) .attr ("refiden")); // Der einzige Betrieb vom Opener kann eine Änderung des Ereignisses pid.change () auslösen; pname.val ($ (this) .attr ("refValue"); pname.change (); // übergeordnete After_Script if (acht_script = pname.attr ('aft_script')) {opener.window.eval (acht_script); } if (acht_script = pid.attr ('acht_script') {opener.window.eval (achT_Script); } window.close ();}; /** * Default hochladen. //console.log(_FileUpload); //console.log(data.result); if (_FileUpload.attr ('reload')! = undefined) {window.location.reload (); }}; /** * Datei -Upload -Funktion, das folgende Attribut zur Steuerung der Aktion von Upload * 'Endpoint' als Upload -URL * 'SID' als Sitzungs -ID * 'Vervollständige' optional, um die benutzerdefinierte Funktion "Complete Load" */var genericUpload = Funktion (DOM) {var endpointurl = $ (this) .Attr ('Endpoint'); var sid = $ (this) .attr ("sid"); var sid = $ (this) .attr ("sid"); var completeFunc = 'UploadComplete'; // Benutzerdefinierte vollständige Funktion var cusComplete = $ (this) .attr ('complete'); if (cusComplete) {completefunc = cusComplete; } $ (this) .FileUpload ({url: Endpointurl, autoUpload: true, dataType: 'json', formData: [{'sessionID': SID}], ParamName: 'fileedata',}). /** * übereinstimmende Fehler mit Eingabe * Nur übereinstimmende Fehler dürfen hier identifiziert werden // Schleifenfehler $ .each (Fehler, Funktion (Index, Fehler) {// Fehlerklasse in Eingabedomelement var input = error.input; input.addclass (conf.Errorclass); // Handle mit dem Fehler Container var msg = input.data ("msg.el"). {// 'Hidden'}). Find ("span"). REMET () // Meldungen $ .each (Fehler. msg.parent (). width ()) {msg.add (msg.find ("span"); var Advance_inputs = Funktion (Eingaben) {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 errhinlint = form.find (". FormError"). first (); if (errlhint.size () == 0) {errHint = $ ("#pageError"); Errhint.Text (''). hide (); }}}; /** * Wenn der Refname ausgewählt ist */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 ("geprüft", false); }} var refClass = check.attr ('refClass'); if (refClass) {if (check.prop ("geprüft")) {$ ("Input."+RefClass) .Prop ("geprüft", true); } else {$ ("Eingabe."+RefClass) .Prop ("geprüft", false); }}}; /** * Setup Readonly Kontrollkästchen */var readonlyCheck = Funktion (e) {e.preventDefault (); return false;}; /** * List Deaktivieren */var readonlySelect = function () {$ (this) .Prop ("deaktiviert", true); }; $ (Dokument) .Ready (function () {$ (document) .ajaxStart (function () {// Die AJAX -Anforderungs -Seite Level -Fehler $ ("#pageError"). text (''). hide (); // Säuberung des Formulars $ (". $ .blockui ({message: "__ __ ('l_processing')}"}); $ .unblockui (); Url = '+Einstellungen.Url); AjaxSynchronized = True; }}}); $. $ (". AJAX_FORM_POST"). jeweils (ajax_post_form_hidden); $ ('. AJAX_LINK_REQ'). Click (ajax_link_req); $ (". BTN_REQ"). Click (btn_req); $ (". bool_checkbox"). Click (bool_checkbox); "{__ ('e_all')}", ': E -Mail': "{__ ('e_email')}", ': number': "{__ ('e_decimal')}", ': url "{__ ('e_min_length')}", '[benötigt]': "{__ ('e_not_empty')}",});});Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für alle hilfreich sein, die Verarbeitungsvorgänge von JavaScript -Formular zu beherrschen. Vielen Dank für Ihre Lektüre.