kostenloser Webspace werbefrei: lima-city


Javascript Formular leeren

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    marvinkleinmusic

    Kostenloser Webspace von marvinkleinmusic

    marvinkleinmusic hat kostenlosen Webspace.

    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. 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. 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

    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

    Kostenloser Webspace von marvinkleinmusic

    marvinkleinmusic hat kostenlosen Webspace.

    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?

Über lima-city

Login zum Webhosting ohne Werbung!