tutorials.de Buch-Aktion 05/2012
Like Tree2Danke
  • 1 Beitrag von DeluXe
  • 1 Beitrag von DeluXe
ERLEDIGT
JA
ANTWORTEN
5
ZUGRIFFE
985
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. #1
    rotekiste rotekiste ist offline Mitglied Bronze
    Registriert seit
    Jan 2005
    Ort
    Berlin
    Beiträge
    35
    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-Code:
    <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-Code:
    (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 (elmmessage) {
                        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 == || 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 == || fnameValue == fname.data('defaultValue')) {
                            
    showMessage(fname, $.l18n('CONTACT_FRM_ERR_FNAME_EMPTY'));
                            
    errors++;
                        }
                        else {
                            
    hideMessage(fname);
                        }
                        if (
    lnameValue.length == || 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 == || phoneValue == phone.data('defaultValue')) {
                            
    showMessage(phone, $.l18n('CONTACT_FRM_ERR_PHONE_EMPTY'));
                            
    errors++;
                        }
                        else {
                            
    hideMessage(phone);
                        }
                        if (
    emailValue.length == || emailValue == email.data('defaultValue')) {
                            
    showMessage(email, $.l18n('CONTACT_FRM_ERR_EMAIL_EMPTY'));
                            
    errors++;
                        }
                        else if (
    emailValue.length && !emailRE.test(emailValue)) {
                            
    showMessage(email, $.l18n('CONTACT_FRM_ERR_EMAIL_INVALID'));
                            
    errors++;
                        }
                        else {
                            
    hideMessage(email);
                        }
                        if (
    msgValue.length == || 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', {maxmaxMessageLength}));
                            
    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
    Geändert von rotekiste (13.03.10 um 10:55 Uhr)
     

  2. #2
    DeluXe DeluXe ist offline Funkjoker
    Registriert seit
    Jul 2004
    Ort
    Offenburg
    Beiträge
    847
    Zitat Zitat von rotekiste Beitrag anzeigen
    [...], aber es wäre mir neu, wenn HTML solche Daten verarbeiten kann [...]
    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.
    rotekiste bedankt sich. 
    mfg

    DeluXe

  3. #3
    rotekiste rotekiste ist offline Mitglied Bronze
    Registriert seit
    Jan 2005
    Ort
    Berlin
    Beiträge
    35
    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.
    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
     

  4. #4
    rotekiste rotekiste ist offline Mitglied Bronze
    Registriert seit
    Jan 2005
    Ort
    Berlin
    Beiträge
    35
    Das ist wohl nun das falsche forum zum Thema,
    vielleicht kann ein Admin mich... bzw das Thema verschieben nach
    > Internet & Protokolle > Hosting & Webserver

    Danke
     

  5. #5
    DeluXe DeluXe ist offline Funkjoker
    Registriert seit
    Jul 2004
    Ort
    Offenburg
    Beiträge
    847
    Zitat Zitat von rotekiste Beitrag anzeigen
    [...] 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?[...]
    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.
    rotekiste bedankt sich. 
    mfg

    DeluXe

  6. #6
    rotekiste rotekiste ist offline Mitglied Bronze
    Registriert seit
    Jan 2005
    Ort
    Berlin
    Beiträge
    35
    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
     

Ähnliche Themen

  1. Antworten: 3
    Letzter Beitrag: 20.10.10, 20:47
  2. JSP Formularverarbeitung
    Von The_Answer1985 im Forum Enterprise Java (JEE, J2EE, Spring & Co.)
    Antworten: 0
    Letzter Beitrag: 29.12.07, 11:05
  3. Formularverarbeitung
    Von counteract im Forum PHP
    Antworten: 2
    Letzter Beitrag: 17.01.07, 00:22
  4. Formularverarbeitung
    Von Headymaster im Forum PHP
    Antworten: 12
    Letzter Beitrag: 06.12.06, 19:38
  5. Formularverarbeitung
    Von LuckyStriked im Forum Flash Plattform
    Antworten: 1
    Letzter Beitrag: 11.07.03, 12:56

Stichworte