kostenloser Webspace werbefrei: lima-city

Javascript Formular leeren

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   marvinkleinmusic

   

   marvinkleinmusic hat kostenlosen Webspace.

   2:09, 14.6.2014

   Hallo Zusammen,
   
   Ich habe heute mal mein Kontaktformular weiter verbessert. Es überträgt jetzt die Daten via AJAX an eine PHP Datei.
   
   Das übermitteln funktioniert auch alles wunderbar, allerdings möchte ich das gesamte Formular leeren, wenn die Error Meldung grün ist. (active_success)
   
   Folgendes Script:
   

   <script type="text/javascript">
   									$(document).ready(function() {
   										$("#contact_form").submit(function() {
   											var name 		   = $("#name").val();
   											var email 	 	   = $("#email").val();
   											var betreff 	   = $("#betreff").val();
   											var message 	   = $("#message").val();
   											
   											if(email == ""){
   												$(".errormsg").addClass('active_err');
   												$(".errormsg").html("Bitte geben Sie Ihre E-Mailadresse an.");
   											}
   											else if(betreff == ""){
   												$(".errormsg").addClass('active_err');
   												$(".errormsg").html("Bitte geben Sie einen Betreff an.");
   											}
   											else if(name == ""){
   												$(".errormsg").addClass('active_err');
   												$(".errormsg").html("Bitte geben Sie Ihren Namen an.");
   											}
   											else if(message == ""){
   												$(".errormsg").addClass('active_err');
   												$(".errormsg").html("Bitte füllen Sie das Nachrichtenfeld aus.");
   											}
   											else{
   												$.ajax ({
   													type: "POST",
   													url: "js/save_contact.php",
   													data: "name=" + name + "&email=" + email + "&betreff=" + betreff + "&message=" + message,
   													success: function(msg) {
   														$(".errormsg").addClass('active_success');
   														$(".errormsg").html(msg);	
   													}
   												});  
   											}
   											return false;
   										});
   									});	
   								
   								</script>

   
   
   Doch wie kann ich das Formular mit Javascript ansprechen und leeren?
   
   
   Liebe Grüße,
   

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. tchab

   tchab hat kostenlosen Webspace.

   9:31, 14.6.2014

   Da da jQuery nutzt erlaube ich mir, auch die Lösung damit zu basteln.
   
   Erst mal musst du deinen Formular-Feldern IDs geben:
   

   <input … id="name-input"></input>

   
   … oder so ähnlich, wichtig ist halt das id-feld.
   
   Dann kannst du nach einer erfolgreichen Übertragung des Formulars einfach folgendes ausführen:
   

   $('#name-input').val('');

   
   Mit .val() bekommt man das, was in dem Feld steht, solange nichts übergeben wird (in meinem Bsp. übergebe ich ""). Ist ein Parameter gesetzt, dann wird dieser in das Feld eingetragen. Wenn du also allen Feldern einen leeren String gibst werden alle leer. ;)
   
   Edit:
   Alternativ könntest du ach eine Klasse, z.B. "empty-on-success" verteilen und diese mit '$(".empty-on-success")' ansprechen.
   
   Beitrag zuletzt geändert: 14.6.2014 9:47:05 von tchab

4. sebulon

   

   sebulon hat kostenlosen Webspace.

   10:11, 14.6.2014

   tchab schrieb:
   
   
   Erst mal musst du deinen Formular-Feldern IDs geben:
   

   <input … id="name-input"></input>

   
   … oder so ähnlich, wichtig ist halt das id-feld.
   
   Dann kannst du nach einer erfolgreichen Übertragung des Formulars einfach folgendes ausführen:
   

   $('#name-input').val('');

   
   

   
   
   Das ist umständlich und auch sinnlos, dank jquery,
   
   gib dem Formular eine ID, oder wenn es das einzige Formular auf der Seite ist:
   

   $("form input, form textarea").val('');

   
   
   damit erwischt du alle Input-Elemente im Formular, das ding baut sich ein Array aller input und textarea elementen auf und führt dann die Wertzuwesung .val durch...
   
   
   Edit:
   
   Das löscht auch die Werte der Buttons, das ist richtig, aber du wolltest ja das ganze formular geleert haben^^
   
   Beitrag zuletzt geändert: 14.6.2014 14:53:52 von sebulon

5. m******e

   11:23, 14.6.2014

   Oder man nimmt einfach reset(). Gut, in diesem Fall macht es wohl kaum einen Unterschied, ob man nun Inhalte zurücksetzt oder ihnen 'nichts' zuweist. Ist ja auch dieselbe Zeichenlänge.
   
   

   $('#name-input').val('');
   // oder
   $('#name-input').reset();

   $("form input, form textarea").val('');
   // oder
   $("form input, form textarea").reset();

   
   Die Suchmaschinen sind bezüglich jQuery auch sehr auskunftsfreudig.
   Beispiel Google: jquery clear input
   
   ;)
   
   Beitrag zuletzt geändert: 14.6.2014 12:25:47 von menschle
6. Autor dieses Themas

   marvinkleinmusic

   

   marvinkleinmusic hat kostenlosen Webspace.

   12:27, 14.6.2014

   sebulon schrieb:
   
   
   
   Das ist umständlich und auch sinnlos, dank jquery,
   
   gib dem Formular eine ID, oder wenn es das einzige Formular auf der Seite ist:
   

   $("form input, form textarea").val('');

   
   
   damit erwischt du alle Input-Elemente im Formular, das ding baut sich ein Array aller input und textarea elementen auf und führt dann die Wertzuwesung .val durch...

   
   
   
   Hallo! Das funktioniert zwar, allerdings löscht das auch die Values meiner Buttons.
   
   Liebe Grüße,
   
   
   EDIT://
   Habe es zu

   $("form input[type=text], form textarea").val('');

   
   angepasst ;)
   
   
   
   
   Beitrag zuletzt geändert: 14.6.2014 12:30:03 von marvinkleinmusic

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?