Startseite
  • » Home
  • » Handbuch & FAQ
  • » Showroom
  • » Forum
  • » Drupalchannel
  • » Übersetzungsserver
  • » Suche
Startseite › Benutzerhandbuch › Fortgeschrittene › Tutorials & How To's - Tipps & Tricks ›

Kontaktformular mit Jquery aufwerten

Eingetragen von dereine (2635) am 09.03.2008 - 00:09 Uhr

Mithilfe von Jquery kann man seinen Benutzern vieles erleichtern, z.B. dass eine Meldung auftaucht, wenn bei Kontaktformular noch nicht alle Felder ausgefüllt sind und somit spart sich der User ein Page-Reload

um die js datei nutzen zu können muss man einfach folgendes in die template.php eintragen

drupal_add_js(drupal_get_path('theme', 'garland'). '/extra.js');

und folgendes in eine extra.js einfügen:

/**
* diese js datei sorgt dafür, dass die Benutzer bei unfertiger Eingabe eine Meldung erhalten
* @author dereine
*/
$(document).ready(function() {
$('form#contact-mail-page').submit(function () {
//Return true -> bottom wird ausgeführt, false -> nichts passiert (außer die Meldung)
if ($('form#contact-mail-page input#edit-name').val() == "") {
alert('Das Feld Name ist noch nicht ausgefüllt');
return false;
}
else if ($('form#contact-mail-page input#edit-subject').val() == "") {
      alert('Das Feld Betreff ist noch nicht ausgefüllt');
return false;
    }
else if ($('form#contact-mail-page input#edit-mail').val() == "") {
      alert('Das Feld Email ist noch nicht ausgefüllt');
return false;
    }
else if ($('form#contact-mail-page textarea#edit-message').val() == "") {
      alert('Das Feld Nachricht ist noch nicht ausgefüllt');
      return false;
}
else {
return true;
}

});
});

In der Datei prüft das Javascript,ob eines der Felder leer ist. Wenn keines leer ist dann führt er die Action hinter dem Button aus, sonst nicht und er zeigt eine alert Meldung an.

‹ Javascript und CSS-Dateien einbinden nach oben Leitfaden zur Erstellung von Suchmaschinenoptimierten Drupal-Sites ›
  • Anmelden oder Registrieren um Kommentare zu schreiben

AJAX Submit

Eingetragen von md (3777)
am 08.02.2009 - 12:07 Uhr

Das kann man auch mit dem Modul http://drupal.org/project/ajaxsubmit erreichen. Dadurch können sehr einfach beliebige Formulare durch Validierung mittels AJAX verbessert werden.

Ich hoffe, dass so etwas mal in die FormAPI Einzug erhält. Redundanter Code für Validierungen ist etwas mit dem man sich in früheren Jahren herumschlagen musste. Da schrieb man einmal JavaScript Code zur Validierung und zusätzlich noch serverseitigen Code für die Fälle wo JS auf dem Client deaktiviert war.

Das sollte heutzutage wirklich nicht mehr nötig sein.

vg
--
md - DrupalCenter.de

mdwp* :: Drupal Consulting

vg
md - DrupalCenter.de

mdwp*

  • Anmelden oder Registrieren um Kommentare zu schreiben

Benutzeranmeldung

  • Registrieren
  • Neues Passwort anfordern

Aktive Forenthemen

  • Fataler Fehler nach update auf Drupal 6.24 wg fehlender Funktion in image.inc
  • meine Profilbesucher anzeigen?
  • Computed_Field Node Objekt bzw. nid?
  • URLs: Groß- und Kleinschreibung
  • Rules und Organic Group
  • [erledigt] drupal 7 - read more ausblenden
  • Modul für Absatznummern / Randnummern
  • Path-Based Metatags - wofür sind die gut?
  • Views Field Language (Spracherkennung der Felder) funktiniert nicht
  • [gelöst] Danland: Standard-Startseite formatieren
  • Aggregator Modul lässt sich nicht konfigurieren
  • Views Accordion - Header Elemente nebeneinander
Weiter

Neue Kommentare

  • Problem gelöst
    vor 18 Minuten 7 Sekunden
  • ich könnte mir vorstellen
    vor 18 Minuten 41 Sekunden
  • Ja und wie greife ich da auf
    vor 27 Minuten 33 Sekunden
  • Unser Server kann das. Ich
    vor 41 Minuten 28 Sekunden
  • Modul "User Relationships"
    vor 41 Minuten 43 Sekunden
  • Ist der Host ein Windows-Host?
    vor 48 Minuten 25 Sekunden
  • Du läßt Dir in der Zeile die
    vor 54 Minuten 16 Sekunden
  • Patch aus Issue Queue
    vor 1 Stunde 16 Minuten
  • "Read more"-Link modifizieren
    vor 1 Stunde 19 Minuten
  • CSS mit body-Tag-Klasse präzisieren
    vor 2 Stunden 13 Minuten

Statistik

Beiträge im Forum: 173993
Registrierte User: 15484

Neue User:

  • Spearoth
  • bwvebb
  • drupal4normi

» Alle User anzeigen

User nach Punkten sortiert:
stBorchert5516
quiptime4713
Tobias Bähr3874
wla3809
md3777
bv3700
Thoor3678
Alexander Langer3282
dereine2635
Exterior2571
» User nach Punkten
Zur Zeit sind 5 User und 39 Gäste online.

Benutzer online

  • Patrick Schanen
  • drupal4normi
  • Carsten Logemann
  • axroth
  • byronic

Benutzerhandbuch

  • FAQ - Häufig gestellte Fragen.
  • Links & Downloads
  • Über Drupalcenter.de und das deutschsprachige Benutzerhandbuch
  • Über Drupal
  • Einsteiger
  • Fortgeschrittene
    • Best Practice - Drupal Sites - Guidelines
    • Die beliebtesten Themes und Module
    • Tutorials & How To's - Tipps & Tricks
      • Kurztipps - Dinge die Stunden sparen können.
      • Notfallpläne - Tipps die Deine Drupalinstallation retten können
      • Anleitung zur Erstellung eines einfachen Kontaktformulars
      • Arbeiten mit dem Drupal Taxonomie-System [beinhaltet veraltete Inhalte]
      • Bearbeiten-Tab zu jeden Block hinzufügen
      • Block View mit Argument
      • Das Tagebuch einer Site
      • Drupal 6 - Automatisch unterschiedliche Bildgröße bei Teaser und Artikel
      • Drupal 6 - Eigene CSS Datei in ein Theme integrieren
      • Drupal 6 - Einfache Bildergalerie mit Image und Lightbox2
      • Drupal 6 - Einrichten eines Kalenders
      • Drupal 6 - Google Adsense ohne Zusatzmodul einbinden
      • Drupal 6 - Hauptnavigation mit DropDown Effekt ab Ebene Zwei
      • Drupal 6 - ImageMagick mit XAMPP Lite nutzen
      • Drupal 6 - Imagefield mit Imagecache und Colorbox
      • Drupal 6 - Installation FCK Editor
      • Drupal 6 - Installieren der WYSIWYG API inkl. Editoren
      • Drupal 7: mehrere Bilder in Node: 1 Bild in Anrisstext
      • Drupal Code Highlighting in Redmine Projektarchiv (CodeRay)
      • Drupal Theming: JavaScript einhängen in Abhängigkeit von Page-Variablen
      • Drush - Das Schweizermesser für Drupal auf Kommandozeile
      • Einfaches und erfolgreiches Patchen unter Windows
      • Eingabeformat & Inputfilter
      • Einrichten eines einfachen, statischen Menüsystems
      • Erstellen von Patches
      • Gallery mit CCK und Views erstellen (Drupal 5)
      • Header image Modul einrichten
      • Inhaltsübersicht für einen User mit einem View erstellen
      • Javascript und CSS-Dateien einbinden
      • Kontaktformular mit Jquery aufwerten
      • Leitfaden zur Erstellung von Suchmaschinenoptimierten Drupal-Sites
      • Mac OSX - Backupskript für Websites auf MAMP
      • Module updaten via Shell auf Windows
      • Module übersetzen
      • Perl-Script zum Erzeugen einer statischen Kopie einer Drupal-Website
      • Portierung eine Themes von openwebdesign.org
      • Prozentbalken bei Views (Balkendiagramm)
      • Themen eines Node-Formulars
      • Titel mit Stil
      • Umkreissuche mit Location- und Views-Modul
      • Usergalerie mit ImageCache, CCK, Views + Thickbox
      • Userprofil mit Usernodes erstellen
      • Validierung von Usereingaben bei Nodes
      • Variation vom Showroom auf drupalcenter.de
      • View mit Eingabeformular für neue Beiträge
      • WebSVN mit Drupal Code Highlighting
      • Zusätzliche Submit-Schaltfläche in Node-Formularen
      • i18n Language Switcher Block, die Links mit den Flaggen themen
      • ui.slider als Ersatz für den Ajax-Pager von Views
      • Zugriffsbeschränkungen für Nodes - eine Übersicht der Möglichkeiten
  • Entwicklung von Modulen und Themes
  • Drupalcenters Community
  • Bücherecke
  • Drupal 7 Video-Trainings (Deutsch)
  • Drupal 6 Module
  • Drupal 7 Module
  • Drupal Screencasts auf deutsch
  • Archiv

Buchempfehlung

Webseiten erstellen Drupal 7
Content - Layout - Administration
Das Drupal-Entwicklerhandbuch
Der Praxisleitfaden für Drupal-basierte Webprojekte.
Pro Drupal 7 Development
(Expert's Voice in Open Source)

Das Copyright des deutschsprachigen Drupal-Benutzerhandbuches unterliegt den jeweiligen Autoren. Übersetzungen des englischsprachigen Drupal-Benutzerhandbuches unterliegen der Creative Commons License, Attribution-ShareAlike 2.0.

Hauptmenü

  • » Home
  • » Handbuch & FAQ
  • » Showroom
  • » Forum
  • » Drupalchannel
  • » Übersetzungsserver
  • » Suche

Quicklinks I

  • Infos
  • Drupal Showcase
  • Installation
  • Update
  • Forum
  • Team
  • Verhaltensregeln

Quicklinks II

  • Drupal Jobs
  • FAQ
  • Drupal-Kochbuch
  • Best Practice - Drupal Sites - Guidelines
  • Drupal How To's
  • Bücherecke

Quicklinks III

  • Tipps & Tricks
  • Drupal Theme System
  • Theme Handbuch
  • Leitfaden zur Entwicklung von Modulen

RSS & Twitter

  • Drupal Planet deutsch
  • RSS Feed Drupal Podcast
  • RSS Feed News
  • RSS Feed Planet
  • Twitter Drupalcenter
  • Drupal Demo
Drupalcenter Team | Impressum & Datenschutz | Kontakt
Angetrieben von Drupal | Drupal is a registered trademark of Dries Buytaert.
Drupal Initiative - Drupal Association