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: