Réinitialiser un formulaire en plusieurs étape avec jQuery

Question

J'ai un formulaire avec un standard bouton de réinitialisation codé ainsi:

<input type="reset" class="button standard" value="Clear" />

La difficulté est, ce formulaire est de la multi-étape de tri, de sorte que si un utilisateur remplit un stade de et puis revient plus tard, l'inscrit dans la mémoire des valeurs pour les différents domaines ne sera pas réinitialisée lorsque le bouton Effacer est cliqué.

Je pense que le fait d'attacher une fonction jQuery pour faire une boucle sur tous les champs et de les effacer manuellement ferait l'affaire. Je suis déjà à l'aide de jQuery à l'intérieur de la forme, mais je suis juste d'obtenir jusqu'à la vitesse et donc ne suis pas sûr de savoir comment aller à ce sujet, d'autres qu'individuellement référencement de chaque champ, par ID, qui ne semble pas très efficace.

TIA pour toute aide.

Answer 1

mis à jour en Mars 2012.

Donc, deux ans après j'ai d'abord répondu à cette question je reviens de voir qu'il a pas mal tourné dans un grand désordre. Je sens qu'il est temps que j'y revenir et de faire ma réponse vraiment correct puisqu'il est le plus upvoted + acceptés.

Pour l'enregistrement, Titi réponse est erronée, car il n'est pas ce que l'affiche originale demandé - il est exact qu'il est possible de réinitialiser un formulaire à l'aide de la maternelle méthode reset (), mais cette question est d'essayer de libérer une forme de rappeler les valeurs qui restent dans le formulaire si vous réinitialisez de cette façon. C'est pourquoi un "manuel" de réinitialisation est nécessaire. Je suppose que la plupart des gens terminé à cette question à partir d'une recherche sur Google et sont vraiment à la recherche de la méthode reset (), mais il ne fonctionne pas pour le cas spécifique de l'OP parle.

Mon original de la réponse était celle-ci:

// not correct, use answer below
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');

Qui pourraient travailler pour un grand nombre de cas, y compris pour l'OP, mais comme souligné dans les commentaires et dans d'autres réponses, va clairement radio/checkbox éléments de tous les attributs de valeur.

Une plus correcte de la réponse (mais pas parfait) est:

function resetForm($form) {
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox')
         .removeAttr('checked').removeAttr('selected');
}

// to call, use:
resetForm($('#myform')); // by id, recommended
resetForm($('form[name=myName]')); // by name

À l'aide de l' :text, :radio, etc. les sélecteurs par eux-mêmes est considéré comme une mauvaise pratique par jQuery comme ils finissent par l'évaluation d' *:text qui lui fait prendre beaucoup plus de temps qu'il ne le devrait. Je préfère la liste blanche de l'approche et souhaite que j'ai utilisé dans ma réponse originale à cette question. De toute façon, en spécifiant l' input partie de la sélection, plus le cache de l'élément de formulaire, cela devrait le rendre le plus performant de réponse ici.

Cette réponse pourrait encore avoir quelques défauts si les gens par défaut pour sélectionner des éléments n'est pas une option qui a une valeur vide, mais il est certainement aussi générique que ça va se faire et elles doivent être traitées au cas par cas.

Answer 2

À partir de http://groups.google.com/group/jquery-dev/msg/2e0b7435a864beea:

$('#myform')[0].reset();

paramètre myinput.val('') peut pas émuler "reset" 100% si vous avez une entrée comme ceci:

<input name="percent" value="50"/>

Par exemple en appelant myinput.val('') sur une entrée avec une valeur par défaut de 50 serait fixé à une chaîne vide, alors que l'appelant myform.reset() serait de le réinitialiser à sa valeur initiale de 50.

Answer 3

Il y a un gros problème avec Paolo accepté de répondre. Considérer:

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

L' .val('') ligne effacer tout value's affectés à des cases à cocher et des boutons radio. Donc, si (comme moi), vous faites quelque chose comme cela:

<input type="checkbox" name="list[]" value="one" />
<input type="checkbox" name="list[]" value="two" checked="checked" />
<input type="checkbox" name="list[]" value="three" />

À l'aide de la accepté de répondre à transformer vos entrées dans:

<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />

Oups - j'ai été en utilisant cette valeur!

Voici une version modifiée qui va garder votre case de radio et de valeurs:

// Use a whitelist of fields to minimize unintended side effects.
$('INPUT:text, INPUT:password, INPUT:file, SELECT, TEXTAREA', '#myFormId').val('');  
// De-select any checkboxes, radios and drop-down menus
$('INPUT:checkbox, INPUT:radio', '#myFormId').removeAttr('checked').removeAttr('selected');

Answer 4

Formes de compensation, c’est un peu compliqué et pas aussi simple qu’il n’y paraît.

Vous suggérons utilisez le plugin formulaire jQuery et utilisez ses fonctionnalités clearForm ou resetForm . Il s’occupe de la plupart des cas coin.