RSS Feed

jQuery form reset

14.08.2009 by naden

Habe mal vor einiger Zeit die folgende Funktion gebaut um ein Formular zu resetten. Da ich bei dem Projekt jQuery genutzt hatte basiert die Funktion ebenfalls darauf.

function resetForm(form) {
  $(':input', $(form)).each(function(i, item) {
    switch(item.tagName.toLowerCase()) {
      case 'input':
        switch(item.type.toLowerCase()) {
          case 'hidden':
          case 'text':
            item.value = '';
          break;
          case 'radio':
          case 'checkbox':
            item.checked = '';
          break;
        }
      break;
      case 'select':
        item.selectedIndex = 0;
      break;
      case 'textarea':
        item.value = '';
      break;
    }
  });
}

Aufruf mit:

resetForm('#form_id');

Natürlich geht auch jeder andere jQuery selector.
Short and sweet. Ergänzungen sind willkommen.


7 Kommentare »

  1. Lukas sagt:

    Gibt es einen Vorteil gegenüber dem Reset-button?

  2. naden sagt:

    In meinem Falle ja. Ich hole mir die Form mit serialize, sende sie per ajax an den Server und wenn alles ok war, dann wird die Form resettet. Einen extra reset button kann ich in meiner Anwendung nicht brauchen.

    P.S.: Interessante E-Mail adresse.

  3. Stejan sagt:

    Man muss unterscheiden zwischen reset button und deiner funktion.
    Reset button setzt die default werte zurück
    deine variante löscht alle werte

    kleiner aber feiner unterschied. Und jetzt kommt es darauf an welche funktion man braucht.
    Gruess stejan

  4. naden sagt:

    So sieht es aus. Der andere Unterschied ist, der Reset-Button ist für den User gedacht dieses Snippet lässt sich von sonst woher triggern.

  5. Pedro sagt:

    Wie rufe ich diese Funktion auf, wenn ich die Speicher knöpft gedrückt habe?

  6. aruss sagt:

    einfacher gehts mit

    $(':input','#myform')
     .not(':button, :submit, :reset, :hidden')
     .val('')
     .removeAttr('checked')
     .removeAttr('selected');
  7. naden sagt:

    @aruss ungeprüft sag ich mal nettes command chaining.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>