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:
Und schon kann der User alle Daten resetten und mit dem ihm angebotenen Formular von vorne anfangen.
Viel Spaß beim nachprogrammieren ;)
Schreibe einen Kommentar