✔ Formularverarbeitung mit jQuery Verständnisproblem

R

rotekiste

Mitglied
Hallo liebe Gemeinde ;)

ich bin gerade dabei, meine althergebrachten HTML-Formulare mit einfachen jQuery-Kniffen etwas komfortabler zu gestalten.
Das meiste klappt auch ganz gut (Validierung, defaultValue ect.), allerdings sind mir bei meiner Recherche ein paar Dinge aufgefallen,
die ich nicht ganz nachvollziehen kann, es wäre super, wenn jemand von euch da draußen mir helfen könnte.

Wo wird dort festgelegt, wie das Formular verarbeitet wird? In der Formular-action ruft sich das Dokument selbst auf, aber es wäre mir neu, wenn HTML solche Daten verarbeiten kann (Im weiteren Dokument finden sich auch keine anderen Hinweise...). Also gehe ich davon aus, dass es in der jQ-function steckt (frm.bind('submit...) ? :(
Beispiel Formular mit dazugehörigem js:
HTML: 
<form id="frm-contact" action="kontakt.html" method="post">
  <div class="part clr">
    <div class="field">
      <label for="frm-contact-subj">Betreff</label>
      <select name="subject" id="frm-contact-subj">
        <option value="">Betreff</option>
        <option value="Bitte um Rückruf">Bitte um Rückruf</option>
        <option value="Fragen zu Leistungen">Fragen zu Leistungen</option>
        <option value="Projektanfrage / Angebotsanfrage">Projektanfrage / Angebotsanfrage</option>
        <option value="Testzugang zum SMS-/MMS-Gateway">Testzugang zum SMS-/MMS-Gateway</option>
      </select>
    </div>
  </div>
  <div class="part clr">
    <div class="field">
      <label for="frm-contact-org">Firma</label>
      <input name="org" type="text" id="frm-contact-org" maxlength="255" class="defaultValue text" value="Firma" />
    </div>
  </div>
[...] 
  <div class="part submit">
    <input type="image" src="img/buttons/absenden.gif" class="submit" alt="absenden" />
  </div>
</form>
PHP: 
(function($) {
    var onDocumentReady = function (event) {
        var frm = $('form#frm-contact');
        if (frm.length > 0) {
            var emailRE = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/,
                maxMessageLength = 2048,
                fields = frm.find(':input:visible:enabled'),
                showMessage = function (elm, message) {
                    var container = elm.parent('div.field').nextAll('div.message');
                    if (container.length > 0) {
                        container.text(message).show();
                    }
                    else {
                        elm.parent('div.field').after('<div class="message">' + message + '</div>');
                    }
                    elm.addClass('error');
                    var ev;
                    if (elm.is('select')) {
                        ev = 'change';
                    }
                    else {
                        ev = 'keyup';                            
                    }
                    elm.one(ev + '.contactForm', function (event) {
                        hideMessage(elm);
                    });
                },
                hideMessage = function (elm) {
                    elm.parent('div.field').nextAll('div.message').hide();
                    elm.removeClass('error');
                },
                onFieldFocus = function (event) {
                    $(this).addClass('focusjs');
                },
                onFieldBlur = function (event) {
                    $(this).removeClass('focusjs');
                },
                onFormSubmit = function (event) {
                    var errors = 0,
                        subj = fields.filter('#frm-contact-subj'),
                        subjValue = $.trim(subj.val()),
                        //org = fields.filter('#frm-contact-org'),
                        //orgValue = $.trim(org.val()),
                        fname =    fields.filter('#frm-contact-fname'),
                        fnameValue = $.trim(fname.val()),
                        lname =    fields.filter('#frm-contact-lname'),
                        lnameValue = $.trim(lname.val()),
                        addr = fields.filter('#frm-contact-addr'),
                        addrValue = $.trim(addr.val()),
                        zipcity = fields.filter('#frm-contact-zipcity'),
                        zipcityValue = $.trim(zipcity.val()),
                        phone = fields.filter('#frm-contact-phone'),
                        phoneValue = $.trim(phone.val()),
                        email = fields.filter('#frm-contact-email'),
                        emailValue = $.trim(email.val()),
                        msg = fields.filter('#frm-contact-msg'),
                        msgValue = $.trim(msg.val());
                    if (subjValue.length == 0 || subjValue == subj.metadata().defaultValue) {
                        showMessage(subj, $.l18n('CONTACT_FRM_ERR_SUBJ_EMPTY'));
                        errors++;
                    }
                    else {
                        hideMessage(subj);
                    }
                    /*
                    if (orgValue.length == 0 || orgValue == org.data('defaultValue')) {
                        showMessage(org, $.l18n('CONTACT_FRM_ERR_ORG_EMPTY'));
                        errors++;
                    }
                    else {
                        hideMessage(org);
                    }
                    */
                    if (fnameValue.length == 0 || fnameValue == fname.data('defaultValue')) {
                        showMessage(fname, $.l18n('CONTACT_FRM_ERR_FNAME_EMPTY'));
                        errors++;
                    }
                    else {
                        hideMessage(fname);
                    }
                    if (lnameValue.length == 0 || lnameValue == lname.data('defaultValue')) {
                        showMessage(lname, $.l18n('CONTACT_FRM_ERR_LNAME_EMPTY'));
                        errors++;
                    }
                    else {
                        hideMessage(lname);
                    }
                    /*
                    if (addrValue.length == 0 || addrValue == addr.data('defaultValue')) {
                        showMessage(addr, $.l18n('CONTACT_FRM_ERR_ADDR_EMPTY'));
                        errors++;
                    }
                    else {
                        hideMessage(addr);
                    }
                    if (zipcityValue.length == 0 || zipcityValue == zipcity.data('defaultValue')) {
                        showMessage(zipcity, $.l18n('CONTACT_FRM_ERR_ZIPCITY_EMPTY'));
                        errors++;
                    }
                    else {
                        hideMessage(zipcity);
                    }
                    */
                    if (phoneValue.length == 0 || phoneValue == phone.data('defaultValue')) {
                        showMessage(phone, $.l18n('CONTACT_FRM_ERR_PHONE_EMPTY'));
                        errors++;
                    }
                    else {
                        hideMessage(phone);
                    }
                    if (emailValue.length == 0 || emailValue == email.data('defaultValue')) {
                        showMessage(email, $.l18n('CONTACT_FRM_ERR_EMAIL_EMPTY'));
                        errors++;
                    }
                    else if (emailValue.length > 0 && !emailRE.test(emailValue)) {
                        showMessage(email, $.l18n('CONTACT_FRM_ERR_EMAIL_INVALID'));
                        errors++;
                    }
                    else {
                        hideMessage(email);
                    }
                    if (msgValue.length == 0 || msgValue == msg.data('defaultValue')) {
                        showMessage(msg, $.l18n('CONTACT_FRM_ERR_MSG_EMPTY'));
                        errors++;
                    }
                    else if (msgValue.length > maxMessageLength) {
                        showMessage(msg, $.l18n('CONTACT_FRM_ERR_MSG_LONG', {max: maxMessageLength}));
                        errors++;
                    }
                    else {
                        hideMessage(msg);
                    }
                    return errors == 0;
                };
            frm.bind('submit.contactForm', onFormSubmit);
            fields.bind('focus', onFieldFocus).bind('blur', onFieldBlur).filter('.defaultValue').defaultValue();
        }
    };
    $(document).bind('ready', onDocumentReady);
})(jQuery);

edit: Seiten mit diesem Prinzip:
http://was-hamburg.de/de/kontakt_anfrage.html
http://www.3steps2web.com/kontakt.html
 
Zuletzt bearbeitet:
rotekiste hat gesagt.:
[...], aber es wäre mir neu, wenn HTML solche Daten verarbeiten kann [...]
Zum Vergrößern anklicken....

Falsch geraten. :)

Der angegebene Pfad endet zwar auf .html, allerdings steckt mit großer Wahrscheinlichkeit eine PHP-Datei o. ä. dahinter.
Das Stichwort nennt sich mod_rewrite. Damit kann man den Pfad in der URL nach belieben anpassen. Serverseitig ist es nicht selten, man im Endeffekt immer bei ein und der selben Datei landet, welche nur anhand der URL verschiedene Inhalte ausliefert.
 
Danke Deluxe, für die schnelle Antwort.
Das ist doch schonmal ein sehr guter Hinweis, ich habe mich mal im schnelldurchlauf belesen, das Prinzip von mod_rewrite ist mir klar.

Serverseitig ist es nicht selten, man im Endeffekt immer bei ein und der selben Datei landet, welche nur anhand der URL verschiedene Inhalte ausliefert.
Zum Vergrößern anklicken....
Hmm, dann würde doch aber in meinem Beispiel für hansmaulwurf.de/kontakt.html und der form action="kontakt.html" die selbe rewrite Regel zutreffen? Oder ist es dem Server möglich, mittels rewrite zu Unterscheiden, ob da post-Daten ankommen und so auf eine verarbeitende .php umzuleiten?! Das wäre ja die pure Magie :eek:
 
Das ist wohl nun das falsche forum zum Thema,
vielleicht kann ein Admin mich... bzw das Thema :) verschieben nach
> Internet & Protokolle > Hosting & Webserver

Danke
 
rotekiste hat gesagt.:
[...] dann würde doch aber in meinem Beispiel für hansmaulwurf.de/kontakt.html und der form action="kontakt.html" die selbe rewrite Regel zutreffen?[...]
Zum Vergrößern anklicken....
Richtig, man landet - üblicherweise - in der selben Datei.

Nur kann diese eben nicht nur ein Kontaktformular anzeigen, sondern hat auch eine gewisse Logik.

Sind keine POST-Daten vorhanden, wird das Kontaktformular ausgeliefert.
Sind POST-Daten vorhanden, werden diese verarbeitet und eine Dankesseite oder eine Fehlermeldung o. ä. ausgeliefert.

Sonst müsste man ja eine Datei für das Anzeigen des Formulars anlegen, eine um die Daten entgegen zu nehmen, eine um auf einen Fehler hinzuweisen, etc...
Das wäre sehr unübersichtlich. ;)
 
Okay,
so bewandert bin ich (noch) nicht in PHP und war noch im HTML-Denken,
dass die PHP Logik einiges mehr zulässt leuchtet mir ein. ^^

Danke DeluXe, für deine Beiträge ;)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück