Réinitialiser une forme multi-étapes avec jQuery

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

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

réglage myinput.val('') pourrait ne pas émuler "reset" 100% si vous avez une entrée comme ceci:

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

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

il y a un gros problème avec la réponse acceptée de Paolo. Prendre en considération:

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

la ligne .val('') permet également d'Effacer les cases à cocher et les boutons radio de la ligne value . Donc si (comme moi) vous faites quelque chose comme ceci:

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

L'utilisation de la réponse acceptée transformera vos entrées en:

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

une version modifiée qui gardera votre case à cocher et les valeurs radio:

// 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');

le nettoyage des formulaires est un peu délicat et pas aussi simple qu'il en a l'air.

suggérez d'utiliser le jQuery form plugin et d'utiliser ses clearForm ou resetForm fonctionnalité. Il s'occupe de la plupart des cas du coin.

document.getElementById ("frm").reset ()

Plugin jQuery

j'ai créé un plugin jQuery pour que je puisse l'utiliser facilement partout où j'en ai besoin:

jQuery.fn.clear = function()
{
    var $form = $(this);

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

    return this;
}; 

donc maintenant je peux l'utiliser en appelant:

$('#my-form').clear();

j'ai l'habitude de faire:

$('#formDiv form').get(0).reset()

ou

$('#formId').get(0).reset()

envisagez d'utiliser le plugin de validation - c'est génial! Et le formulaire de Reset est simple:

var validator = $("#myform").validate();
validator.resetForm();

Voici quelque chose pour vous aider à démarrer

$('form') // match your correct form 
.find('input[type!=submit], input[type!=reset]') // don't reset submit or reset
.val(''); // set their value to blank

bien sûr, si vous avez des cases à cocher / boutons radio, vous aurez besoin de modifier ceci pour les inclure aussi et mettre .attr({'checked': false});

modifier Paolo réponse est plus concis. Ma réponse est plus verbeuse parce que je ne connaissais pas le sélecteur :input , et je n'ai pas pensé à simplement enlever l'attribut vérifié.

je trouve que cela fonctionne bien.

$(":input").not(":button, :submit, :reset, :hidden").each( function() {
    this.value = this.defaultValue;     
});

fondamentalement aucune des solutions fournies me rend heureux. comme l'ont souligné quelques personnes, ils vident le formulaire au lieu de le réinitialiser.

cependant, il y a quelques propriétés javascript qui aident:

• valeur par défaut pour les champs de texte
• defaultChecked for checkbox and radio buttons
• defaultSelected for select options""

ces champs stockent la valeur qu'un champ avait lorsque la page a été chargée.

écrire un plugin jQuery est maintenant trivial: (pour les impatients... voici une démo http://jsfiddle.net/kritzikratzi/N8fEF/1 / )

plugin-code

(function( $ ){
    $.fn.resetValue = function() {  
        return this.each(function() {
            var $this = $(this); 
            var node = this.nodeName.toLowerCase(); 
            var type = $this.attr( "type" ); 

            if( node == "input" && ( type == "text" || type == "password" ) ){
                this.value = this.defaultValue; 
            }
            else if( node == "input" && ( type == "radio" || type == "checkbox" ) ){
                this.checked = this.defaultChecked; 
            }
            else if( node == "input" && ( type == "button" || type == "submit" || type="reset" ) ){ 
                // we really don't care 
            }
            else if( node == "select" ){
                this.selectedIndex = $this.find( "option" ).filter( function(){
                    return this.defaultSelected == true; 
                } ).index();
            }
            else if( node == "textarea" ){
                this.value = this.defaultValue; 
            }
            // not good... unknown element, guess around
            else if( this.hasOwnProperty( "defaultValue" ) ){
                this.value = this.defaultValue; 
            }
            else{
                // panic! must be some html5 crazyness
            }
        });
    }
} )(jQuery);

utilisation

// reset a bunch of fields
$( "#input1, #input2, #select1" ).resetValue(); 

// reset a group of radio buttons
$( "input[name=myRadioGroup]" ).resetValue(); 

// reset all fields in a certain container
$( "#someContainer :input" ).resetValue(); 

// reset all fields
$( ":input" ).resetValue(); 

// note that resetting all fields is better with the javascript-builtin command: 
$( "#myForm" ).get(0).reset(); 

quelques notes ...

• je n'ai pas regardé dans le nouveau html5 il y en a qui ont besoin d'un traitement spécial, mais la même idée devrait fonctionner.
Les éléments
• doivent être référencés directement. c'est à dire $( "#container" ).resetValue() ne fonctionne pas. utilisez toujours $( "#container :input" ) à la place.
• comme mentionné ci-dessus, voici une démo: http://jsfiddle.net/kritzikratzi/N8fEF/1 /

vous pourriez trouver que c'est en fait plus facile à résoudre sans jQuery.

en JavaScript normal, c'est aussi simple que:

document.getElementById('frmitem').reset();

j'essaie de toujours me rappeler que bien que nous utilisions jQuery pour améliorer et accélérer notre codage, parfois il n'est pas vraiment plus rapide. Dans ces cas, il est souvent préférable d'utiliser une autre méthode.

j'ai fait une légère variation de Francis Lewis " bonne solution . Ce que sa solution ne fait pas, c'est de mettre les sélections à blanc. (Je pense que lorsque la plupart des gens veulent "effacer", ils veulent probablement rendre toutes les valeurs vides.), Celui-ci le fait avec .find('select').prop("selectedIndex", -1) .

$.fn.clear = function()
{
    $(this).find('input')
            .filter(':text, :password, :file').val('')
            .end()
            .filter(':checkbox, :radio')
                .removeAttr('checked')
            .end()
        .end()
    .find('textarea').val('')
        .end()
    .find('select').prop("selectedIndex", -1)
        .find('option:selected').removeAttr('selected')
    ;
    return this;
};

j'ajoute normalement un bouton de réinitialisation caché au formulaire. lorsque nécessaire: $ ('#reset').cliquez sur();

Modification de la plus-voté réponse pour le $(document).ready() :

$('button[type="reset"]').click(function(e) {
    $form = $(this.form);
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
    e.preventDefault();
});

utilisez simplement le jQuery Trigger event comme suit:

$('form').trigger("reset");

cela réinitialisera les cases à cocher, les radiobuttons, les boîtes de textes, etc... Essentiellement, il tourne votre forme à son état par défaut. Il suffit de placer le #ID, Class, element dans le sélecteur jQuery .

cela a fonctionné pour moi, la réponse de pyrotex n'a pas 'réinitialiser les champs de sélection, a pris son, voici mon edit:

// Use a whitelist of fields to minimize unintended side effects.
$(':text, :password, :file', '#myFormId').val('');  
// De-select any checkboxes, radios and drop-down menus
$(':input,select option', '#myFormId').removeAttr('checked').removeAttr('selected');
//this is for selecting the first entry of the select
$('select option:first', '#myFormId').attr('selected',true);

J'utilise la solution Paolo Bergantino qui est super mais avec peu de retouches... Spécifiquement pour fonctionner avec le nom du formulaire à la place d'un identifiant.

par exemple:

function jqResetForm(form){
   $(':input','form[name='+form+']')
   .not(':button, :submit, :reset, :hidden')
   .val('')
   .removeAttr('checked')
   .removeAttr('selected');
}

Maintenant, quand je veux utiliser un pourrait faire

<span class="button" onclick="jqResetForm('formName')">Reset</span>

comme vous le voyez, cela fonctionne avec n'importe quel formulaire, et parce que j'utilise un style css pour créer le bouton la page ne se rafraîchira pas quand vous cliquerez. Encore une fois merci Paolo pour votre entrée. Le seul problème est que si J'ai des valeurs par défaut dans la forme.

j'ai utilisé la solution ci-dessous et cela a fonctionné pour moi (mélange javascript traditionnel avec jQuery)

$("#myformId").submit(function() {
    comand="window.document."+$(this).attr('name')+".reset()";
    setTimeout("eval(comando)",4000);
})

Je ne suis qu'un intermédiaire en PHP, et un peu paresseux pour plonger dans un nouveau langage comme JQuery, mais ce qui suit n'est-il pas une solution simple et élégante?

<input name="Submit1" type="submit" value="Get free quote" />
<input name="submitreset" type="submit" value="Reset" />

ne peut pas voir une raison pour ne pas avoir deux boutons soumettre, juste avec des buts différents. Puis simplement:

if ($_POST['submitreset']=="Reset") {
$_source = "--Choose language from--";
$_target = "--Choose language to--"; }

vous venez de redéfinir vos valeurs à nouveau à quelque soit le défaut est censé être.

une méthode que j'ai utilisée sur un formulaire assez grand (plus de 50 champs) était de simplement recharger le formulaire avec AJAX, essentiellement faire un rappel au serveur et juste retourner les champs avec leurs valeurs par défaut. Ceci rendu est beaucoup plus facile que d'essayer de saisir chaque champ avec JS et de le définir à sa valeur par défaut. Il m'a également permis de garder les valeurs par défaut en un seul endroit--le code du serveur. Sur ce site, il y avait aussi des valeurs par défaut différentes selon les paramètres du compte et Je n'ai donc pas eu à m'inquiéter de les envoyer à JS. Le seul petit problème que j'ai eu à traiter était certains suggèrent des champs qui ont exigé l'initialisation après L'appel AJAX, mais pas une grosse affaire.

toutes ces réponses sont bonnes, mais la façon la plus facile de le faire est avec un faux reset, c'est-à-dire que vous utilisez un lien et un bouton reset.

il suffit d'ajouter quelques CSS pour cacher votre vrai bouton de réinitialisation.

input[type=reset] { visibility:hidden; height:0; padding:0;}

et ensuite sur votre lien vous ajoutez comme suit

<a href="javascript:{}" onclick="reset.click()">Reset form</a>

<input type="reset" name="reset" id="reset" /><!--This input button is hidden-->

Espérons que cette aide! A.

<script type="text/javascript">
$("#edit_name").val('default value');
$("#edit_url").val('default value');
$("#edit_priority").val('default value');
$("#edit_description").val('default value');
$("#edit_icon_url option:selected").removeAttr("selected");
</script>

ici avec le rafraîchissement pour les cases à cocher et sélectionne:

$('#frm').find('input:text, input:password, input:file, textarea').val('');
$('#frm').find('input:radio, input:checkbox').attr("checked",false).checkboxradio("refresh");
$('#frm').find('select').val('').selectmenu('refresh');

j'ai eu le même problème et le poste de Paolo m'a aidé, mais j'avais besoin de régler une chose. Mon formulaire avec id advancedindexsearch ne contenait que des champs d'entrée et obtient les valeurs d'une session. Pour une raison quelconque, le suivant ne fonctionne pas pour moi:

$("#advancedindexsearch").find("input:text").val("");

si je mets une alerte après cela, je vois que les valeurs ont été enlevées correctement mais ensuite elles ont été remplacées à nouveau. Je ne sais toujours pas comment ou pourquoi mais la ligne suivante a fait le tour pour moi:

$("#advancedindexsearch").find("input:text").attr("value","");

Paolo réponse ne tient pas compte de sélecteurs de date, d'ajouter:

$form.find('input[type="date"]').val('');

j'ai fait un peu d'amélioration sur Paolo Bergantino d'origine de réponse

function resetFormInputs(context) {
    jQuery(':input', context)
    .removeAttr('checked')
    .removeAttr('selected')
    .not(':button, :submit, :reset, :hidden')
    .each(function(){
         jQuery(this).val(jQuery(this).prop('defautValue'));
    });
}

De cette façon, je peux passer n'importe quel élément de contexte à la fonction. Je suis capable de réinitialiser le formulaire entier ou seulement un certain ensemble de champs, par exemple:

resetFormInputs('#form-id'); // entire form
resetFormInputs('.personal-info'); // only the personal info field set

Plus, les valeurs par défaut des entrées sont conservées.

voici ma solution, qui fonctionne aussi avec les nouveaux types d'entrée html5:

/**
 * removes all value attributes from input/textarea/select-fields the element with the given css-selector
 * @param {string} ele css-selector of the element | #form_5
 */
function clear_form_elements(ele) {
    $(ele).find(':input').each(function() {
        switch (this.type) {
            case 'checkbox':
            case 'radio':
                this.checked = false;
            default:
                $(this).val('');
                break;
        }
    });
}

$(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);