Leeren eines Webformulares

Das leeren eines Webformulars mitsamt einem löschen der Defaultwerte verlangt den Einsatz von Javascript, wie es geht wird in diesem Artikel beschrieben.

Ich denke der Großteil meiner Leser hat bereits das ein oder andere Webformular geschrieben, und wem es ein ebenso großes Mühsal ist wie mir, dem möchte ich hier eine kleine Hilfestellung bieten.

Möchte man dem User die Möglichkeit anbieten alle Daten die er in einem Formular eingegeben hat wieder zu löschen, erreicht man dies über einen zusätzlichen Button (siehe auch http://de.selfhtml.org/html/formulare/formularbuttons.htm):

<input type=”reset” value=”Abbrechen”>

Gleich mal als Beispiel zum selber ausprobieren:

 

Funktioniert auch bestens, solange man dem Besucher der Website nicht noch weiteren Komfort gönnt. Hat man z.B. Pflichtfelder in seinem Formular, und der User hat ein solches nicht ausgefüllt, gehört es eigentlich schon zum guten Ton, dass man dem User das Formular nochmal zum ergänzen anbietet, vorbefüllt mit den vorher von ihm angegebenen Daten. Möchte der User nun all seine Daten aus dem Formular löschen um nochmal von vorne anzufangen funktioniert ein Klick auf den Formular Button nicht mehr. Auch hier ein Beispiel zum gleich testen:

 

Denn der Klick auf den Button leert die Felder nicht, er setzt sie auf den Ursprungszustand zurück, der vom Server geliefert wurde, und damit auf die mitgelieferte Befüllung. Hier muss man sich anderer Wege behelfen, und wie so oft im Web heißt das Zauberwort JavaScript.

Hier eine entsprechende Lösung:

<a onclick="document.forms['default'].elements['nameOfInputField'].value='';” href="#">zurücksetzen</a>

Über einen damit erzeugten Link lässt sich jedes einzelne Feld per JS löschen indem es im Dom-Baum zum Element manövriert und den Value mit nichts ersetzt. Oder im Falle eines DropDowns mit dem 0 Element.

Das ganze funktioniert natürlich auch wunderbar als Button, der ebenfalls per onClick einen JavaScript Aufruf starten kann.

<input type="button" value="zurücksetzen" onClick="document.forms['third'].elements['input'].value='';"/>

Natürlich darf auch hier ein Beispiel zum direkt ausprobieren nicht fehlen:


zurücksetzen

Und schon kann der User alle Daten resetten und mit dem ihm angebotenen Formular von vorne anfangen.
Viel Spaß beim nachprogrammieren ;)

Ähnliche Artikel:

JavaScript Countdown vs JQuery Countdown

HOWTO: Ein Countdown auf einer Homepage, z.B. fürs geplante Release, selbstgeschrieben oder mit JQuery realisieren. Hier wird gezeigt, wie es geht.

Was haben Downloadsites die noch auf ihre Werbung aufmerksam machen wollen, Browsergames in denen der aktuelle Auftrag abgearbeitet wird, Releases von Spielen, und die Zeit vor Silvester gemeinsam?

Einen Countdown!

Wie man so einen implementiert wollen wir uns nun ansehen.

Plain JavaScript Countdown

Als Beispiel wollen wir einen Countdown realisieren, der die Sekunden bis Neujahr 2012 anzeigt. Javascript ist dabei unser Freund. Diesmal!

Als aller erstes erzeugen wir uns zwei Objekte, eines für den jetztigen Zeitpunkt und eines für Neujahr 2012, dann berechnen wir uns die Differenz aus den beiden Zeiten:

var jetzt  = new Date();
var neujahr = new Date(2012,01,01,0,0,0);

var secsLeft = Math.floor((neujahr.getTime() - jetzt.getTime()) / 1000);

Diesen Teil des Codes stecken wir zwischen den <head> Tag der Webseite. Die Differenz müssen wir durch 1000 rechnen, da wir uns auf Millisekundenebene befinden und für unsere Anzeige lediglich die Sekunden relevant sein sollen. Math.floor verwenden wir, um ganze Zahlen anzuzeigen.

Dies müssen wir nun noch im HTML anzeigen, dazu benötigen wir zuerst ein Element mit der id counter im body des html codes, dieses befüllen wir dann regelmäßig mittels:

document.getElementById("counter").innerHTML = text;

All das fassen wir in einer Funktion zusammen z.B.

function countdown(){

Damit das Script nun regelmäßig ausgeführt wird rufen wir es rekursiv erneut auf mit einem Versatz von 1000 Millisekunden, also einer Sekunde.

window.setTimeout("countdown()", 1000);

Dies fügen wir als letzte Zeile in der vorher erstellten Funktion ein.

Die Funktion ist nun fertig, doch muss sie noch gestartet werden. Hier sind wir schon zu den ersten kleinen Kunstgriffen gezwungen, damit der Counter nicht nur im Firefox sondern auch im Internetexplorer seine Arbeit tut.

if (window.addEventListener) {
  window.addEventListener('load', countdown, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', countdown);
}

Der Internetexplorer kennt die Methode addEventListener nicht sondern verwendet stattdessen attachEvent.

Hier nochmal das Gesamtwerk:

<html>
<head>
<script language="javascript" type="text/javascript">
function countdown(){
 var jetzt  = new Date();
 var neujahr = new Date(2012,01,01,0,0,0); 

 var secsLeft = Math.floor((neujahr.getTime() - jetzt.getTime()) / 1000);

 if(secsLeft > 0){
 var text = "Noch " + secsLeft + " Sekunden bis Neujahr 2012!";
 } else {
 var text = "Es ist bereits 2012!";
 }
 document.getElementById("counter").innerHTML = text;

 window.setTimeout("countdown()", 1000);
}

if (window.addEventListener) {
 window.addEventListener('load', countdown, false);
} else if (window.attachEvent) {
 window.attachEvent('onload', countdown);
}
</script>

<p id="counter">Noch 26665457 Sekunden bis Neujahr 2012!<p>

</p>
</body>
</html>

Eigentlich recht simpel und gradlinig. Doch wie wir gesehen haben gab es schon kleinere Probleme durch die Browserdiversifikation . Um den Code der eigentlichen Seite übersichtlich und schlank zu halten greife ich daher gerne auf entsprechende JS Libraries zurück.

JQuery Javascript Countdown

Dafür bauen wir zuerst JQuery in unserer Beispiel-Webseite im Head einbinden:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

Die JQuery Standardlibrary bietet viele Funktionen, auf die man aufbauen kann. Damit sie selbst nicht zu aufgebläht und überladen wird, sind Zusatzfunktionen in Plugins ausgelagert. Deshalb besorgen wir uns noch von der Jquery-Homepage http://plugins.jquery.com/project/countdown2 das zugehörige Plugin und binden es ebenfalls ein im Head ein:

<script type="text/javascript" src="jquery.countdown.min.js"></script>

Dann mussen wir noch den Javascript Codeteil abändern:

<script type="text/javascript">
$(document).ready(function(){
   var newYear = new Date(2012,1,1,0,0,0);
   $('#counter').countdown({unitl: newYear, format: 'S'});
});
</script>

Auch hierbei darf der Javascript Code erst loslegen, nachdem das Dokument fertig ist. $(document).ready() ist dafür der Standardaufruf mittels JQuery. Darin erzeugen wir uns wieder ein Date Objekt, dermal das Zieldatum. Dann müssen wir noch das Plugin damit füttern. Per JQuery wird das Element mit der ID #Counter selektiert und dort ein .counter eingefügt, dem wir das Datum als until Parameter übergeben, außerdem legen wir noch ein Format fest, denn wir wollen nur Sekunden anzeigen lassen. Fertig!

Das ganze lässt sich noch weiter feinabstimmen: http://keith-wood.name/countdownRef.html Auf der Dokumentationsseite sind die Möglichkeiten das Plugin zu konfigurieren beschrieben. Sie enthalten unter anderem die Möglichkeit eigene Labels zu vergeben, so spart man sich für jede Sprache die die Website unterstützt die lokalisierte Fassung einzubinden.

Freilich hat der Homepagebesucher mit der JQuery Bibliothek und dem zugehörigen Plugin deutlich mehr Netzwerktraffic zu verbuchen, doch hat man damit für die Übersichtlichkeit und Wartbarkeit einiges gewonnen. Als weiteren Pluspunkt hat man das Gemurkse ob Internetexplorer oder ein anderer Browser an die Bibliothek delegiert. Und ob des Traffics bleibt zu sagen, dass sich das recht bald durch Synergieeffekte durch den Einsatz von JQuery bei anderen Teilen der Homepage bezahlt macht.

Fröhliches Runterzählen!

Ähnliche Artikel:

Automatisch Scrollen mit jQuery

Automatisches Scrollen mit jQuery hat seine Tücken. Hier findet man, was man beachten muss, damit es Firefox, Chrome und Co gleichermaßen läuft.

Neulich habe ich für eine Homepage einen “Back to top” Button umsetzen wollen. Das Szenario dafür ist klar definiert, man hat eine Seite die so hoch ist, dass ein Scrollbalken notwendig ist. zB durch folgendes CSS

#content {
   height: 2000px;
}

Ganz unten auf der Seite folgt dann ein Link mit dem klingenden Titel “Back to top”, klickt der User darauf soll, ohne einen neuen Request abzuschicken, die Seite wieder von ganz oben weg angezeigt werden. Hier kommt JavaScript ins Spiel, und weil JavaScript browserübergreifend fehleranfällig ist, nutzt man am besten eine der beliebten Scriptbibliotheken. In meinem Fall ist das jQuery.

Diese bietet nicht nur das Springen auf den Seitenanfang an, nein wir können damit dem User das Scrollen visualisieren, indem wir das Scrollen direkt für ihn übernehmen, als würde er am Mausrad drehen. Dazu tauschen wir die Funktionalität des “back”-Links mit folgendem Konstrukt aus:

$(‘a[href=#]’).click(function(){
   $(‘html’).animate({scrollTop: 0}, ‘slow’);
   return false;
}

Wir animieren also die Position des HTML Elements um uns so einen Slideeffekt zu erzeugen. Das ‘return false’ ist notwendig, damit die Standardfunktionalität des Links nicht ausgeführt wird. Propagiert wird dies so in diversen Fachbüchern zu jQuery. Es funktionierte in meinem Fall auch wunderbar unter Firefox, doch unter Chrome stand der Bildausschnitt still.

Lösung: Dies liegt daran, dass Chrome die Seite im sogenannten Quirks Modus (http://de.wikipedia.org/wiki/Quirks-Modus) anzeigte. Dabei versucht der Browser eine gewisse Abwärtskompatibilität der Websites zus ichern um eventuell veralteten HTML Code auszugleichen. Damit das Scrollen nun auch im Quirks Modus funktioniert, wäre eine Selektion auf ‘body’ notwendig. Um ganz sicher zu gehen selektiert man gewöhnlich beides:

$(‘html,body’).animate({scrollTop: 0}, ‘slow’);

Das kann jedoch in manchen Opera Versionen zu Fehlern führen, da diese versuchen sowohl das HTML als auch das Body Element zur selben Zeit zu scrollen.

Wer auf der sicheren Seite sein mag oder gar komplexeres Scrollen, zB von Subelementen, einbauen mag, dem sei das jQuery Plugin ScrollTo empfohlen, dass nicht nur diesen Problemfall abdeckt sondern noch einige andere Szenarien ermöglicht. Natürlich auf Kosten von ein paar KB mehr Source den der User laden muss.

Aufgrufen wird der Scrolleffekt dabei so:

$.scrollTo(0,'slow');

Am besten schaut ihr euch das Plugin und die Möglichkeiten die es bietet selbst an: http://plugins.jquery.com/project/ScrollTo

Ähnliche Artikel:

jQuery in Greasemonkey

Wer kennt das nicht, die täglich besuchte Website deckt im Grunde die Anforderungen ab die man an Sie stellt, aber hin und wieder wär etwas Zusatzkomfort nicht schlecht. Hier kommt Greasemonkey ins Spiel.

Greasemonkey ist eine Erweiterung für den Webbrowser Firefox, dessen Scripte teilweise auch unter Google Chrome, Opera und anderen Browsern mit kleinen Anpassungen, laufen. Mithilfe dieser Erweiterung ist es möglich eigene locale Javascript Datein im Browser ausführen zu lassen, um Erscheinungsbild und Verhalten einer Webseite ohne Eingriff auf die eigentliche Seite anzupassen. Sehr nütlich um z.B. bei einem täglich genutzten Suchfilter die Auswahlparameter automatisch auswählen zu lassen.

Nun gibt es kaum etwas was einen mehr ermüdet als Javascript und CSS in Kombination, vorallem bei den strikt eingehaltenen Standards die es für das Web gibt. Hier kommt jQuery ins Spiel. jQuery ist ein umfangreiches Framework, das unter der MIT oder GPL2 Lizenz frei zur Verfügung gestellt wird.

jQuery zeichnet sich unter anderem durch einfache Selektion und Manipulation des DOM-Baums aus, ist bereits CSS3 fähig und wird als cross-browser kompatibel umworben. Letztere herrausragende Eigenschaft fällt bei der Nutzung von Greasemonkeyscripten normalerweise nicht so ins Gewicht. Wenn jemand allerdings Erfahrungen damit gesammelt hat, wie gut ein Greasemonkeyscript mit jQuery in anderen Browsern funktioniert, möge er sich bitte melden! jQuery offeriert zusätzlich einige Hilfsfunktionen, die neben einem Eventsystem auch diverse Effekte und Animationen bereitstellen, sowie einfache eine Ajaxfunktionalität. Außerdem sind bereits zahlreiche Plugins verfügbar, und sollte der eigene Anwendungsfall noch nicht abgedeckt sein, ist es auch äußerst leicht erweiterbar.

Genug der Werbung, wer nun an jQuery interessiert ist möge doch selbst noch etwas darüber recherchieren. Wer ein anderes JS Framework lieber verwenden möchte kann dies gern tun, an der grundlegenden Vorgehensweise für das benutzen eines solchen Frameworks ändert sich dadurch nichts.

Ich möchte hier noch kurz vorstellen wie man jQuery in einem Greasemonkeyscript nutzt und zeigen was man dabei besonders beachten muss. Außerdem gibts natürlich ein kleines Beispielscript.

Greasemonkey in der aktuellen Version erlaubt das einbinden von externen Bibliotheken über die @require Annotation. Hierbei muss einfach die URL zur jQuery Bibliothek angegeben werden. die @include Annotation beschränkt das Script auf meine Blogseite, sowie alle Unterseiten davon.

//==UserScript==
// @name           Nullpointer Wobbling Logo
// @namespace      nullpointer.at
// @description    Nullpointer Wobbling Logo
// @include        http://nullpointer.at/
// @include        http://nullpointer.at/*
// @require        http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// ==/UserScript==
jQuery('a#logo').mouseover(function() {
var pos = $(this).css("left");
if (pos == "0px") {
$(this).animate({left: "200px"}, 5000);
} else {
$(this).animate({left: "0px"}, 3000);
}
});

Das Script kann über diesen Link installiert werden: nullpointer_logo.user.js (Achtung Greasemonkey >= 0.8 und Firefox notwendig)

Der aufruf der jQuery Funktionalität ist dannach simpel wie eh und je. Als Kurzeinführung:
jQuery … damit wird die Bibliothek aufgerufen
‚a#logo‘ … damit wird das entsprechende HTML element selektiert, hier alle Links die die Id logo haben.
.mouseover … hier die eventhandling Methode, sollte die Maus über das Logo von nullpointer.at geführt werden, wird die innere Funktion aufgerufen, die das Logo ein wenig verschieben. Bei einem weitern Mouseover erfolgt der nächste Aufruf, und das Logo wird zurückgeschoben.

Achtung! Greasemonkey lädt bei der Installation eines Scripts alle Abhängigkeiten runter, ein Script dass eine @require Bibliothek verlinkt muss diese schon bei der Installation definiert haben. Ein neues Script muss also erstmal per Hand installiert werden, damit die Abhängigkeit richtig aufgelöst wird. Auch eine Änderung eines @require Links würde daher zu Fehlern führen, die die Bibliothek nicht neu geladen wird, dennoch aber die geänderte Version gesucht wird. Das Script muss daher auch in diesem Fall neu installiert werden.

Ebenfalls gibt es derzeit Fehler bei der Nutzung der aktuellen jQuery Version 1.4.2 (weshalb ich hier im Script auch Version 1.3.2 nutze) im Eventhandling. Genaueres dazu kann in diesem Thread nachgelesen werden:
http://forum.jquery.com/topic/importing-jquery-1-4-1-into-greasemonkey-scripts-generates-an-error

Sollte Kompatibilität mit älteren Greasemonkeyversionen notwendig sein, so ist es notwendig die jQuerybibliothek anders zu laden. Auf folgender Webseite dazu eine kleine Einführung:

http://joanpiedra.com/jquery/greasemonkey/

Greasemonkey

http://www.greasespot.net

http://de.wikipedia.org/wiki/Greasemonkey

https://addons.mozilla.org/de/firefox/addon/748/

jQuery

http://jquery.com/

Ähnliche Artikel: