web-dev-qa-db-fra.com

JavaScript: vrai formulaire réinitialisé pour les champs cachés

Malheureusement, la fonction form.reset () ne réinitialise pas les entrées masquées du formulaire. Vérifié dans FF3 et Chromium.

Quelqu'un a-t-il une idée de la procédure de réinitialisation pour les champs cachés?

javascriptformsreset
22
Bogdan Gusiev

Le moyen le plus simple de le faire est d’afficher display: none champ de texte au lieu de champ masqué. Dans ce cas, le processus de réinitialisation par défaut est utilisé régulièrement.

26
Bogdan Gusiev

Ceci est correct conformément à la norme , malheureusement. Une mauvaise spécification verrue IMO. IE fournit néanmoins aux champs cachés une valeur defaultValue réinitialisable. Voir cette discussion : il ne va pas (hélas) changer en HTML5.

(Heureusement, il est rarement nécessaire de réinitialiser un formulaire. En tant que fonctionnalité d'interface utilisateur, il est généralement mal vu.)

Étant donné que vous ne pouvez pas obtenir la valeur originale de l'attribut value, vous devez la dupliquer dans un autre attribut et le récupérer. par exemple.:

<form id="f">

<input type="hidden" name="foo" value="bar" class="value=bar"/>

function resetForm() {
    var f= document.getElementById('f');
    f.reset();
    f.elements.foo.value= Element_getClassValue(f.elements.foo, 'value');
}

function Element_getClassValue(el, classname) {
    var prefix= classname+'=';
    var classes= el.className.split(/\s+/);
    for (var i= classes.length; i-->0;)
        if (classes[i].substring(0, prefix.length)===prefix)
            return classes[i].substring(prefix.length);
    return '';
}

HTML5 data, un attribut supplémentaire tel que title, un <!-- comment --> immédiatement après pour lire la valeur, des informations JS supplémentaires explicites ou des champs masqués supplémentaires destinés uniquement aux valeurs par défaut.

Quelle que soit l'approche, il faudrait encombrer le HTML; il ne peut pas être créé par le script au moment de la préparation du document, car certains navigateurs auront déjà remplacé la valeur du champ par une valeur mémorisée (à partir d'un rechargement ou d'une pression sur le bouton Précédent) avant l'exécution du code.

13
bobince

Une autre réponse, au cas où quelqu'un viendrait ici en chercher un. Sérialiser le formulaire après le chargement de la page et utiliser ces valeurs pour réinitialiser les champs cachés ultérieurement:

var serializedForm = $('#myForm').serialize();

Ensuite, pour réinitialiser le formulaire:

function fullReset(){

    $('#myForm').reset(); // resets everything except hidden fields


    var formFields = decodeURIComponent(serializedForm).split('&'); //split up the serialized form into variable pairs

    //put it into an associative array
    var splitFields = new Array();
    for(i in formFields){
        vals= formFields[i].split('=');
        splitFields[vals[0]] = vals[1];
    }
    $('#myForm').find('input[type=hidden]').each(function(){    
        this.value = splitFields[this.name];
    });

}
6
ForOhFor

J'ai trouvé plus facile de définir une valeur par défaut lorsque le document est chargé, puis d'intercepter la réinitialisation et de rétablir les valeurs initiales des chiots masqués. Par exemple,

//fix form reset (hidden fields don't get reset - this will fix that pain in the arse issue)
$( document ).ready(function() {
  $("#myForm").find("input:hidden").each(function() {
      $(this).data("myDefaultValue", $(this).val());
  });

  $("#myForm").off("reset.myarse");
  $("#myForm").on("reset.myarse", function() {
     var myDefaultValue = $(this).data("myDefaultValue");
     if (myDefaultValue != null) {
       $(this).val(myDefaultValue);
     }
  });
}

J'espère que ça aide quelqu'un :)

3
Anthony Estelita

Vous pouvez utiliser jQuery - cela videra les champs cachés:

$('form').on('reset', function() {
  $("input[type='hidden']", $(this)).val('');
});

Conseil: assurez-vous simplement que vous ne réinitialisez pas le champ de jeton Csrf ou tout autre élément qui ne devrait pas être vidé. Vous pouvez affiner la spécification de l'élément si nécessaire.

Si vous souhaitez réinitialiser le champ à une valeur par défaut, vous pouvez utiliser (non testé):

$('form').on('reset', function() {
  $("input[type='hidden']", $(this)).each(function() {
    var $t = $(this);
    $t.val($t.data('defaultvalue'));
  });
});

et enregistrez la valeur par défaut dans la propriété data-defaultvalue="Something".

1
Alan
$('#form :reset').on('click',function(e)({
    e.preventDefault();
    e.stopImmediatePropagation();
    $("#form input:hidden,#form :text,#form textarea").val('');
});

Pour sélectionner, case à cocher, radio, il est préférable de connaître (conserver) les valeurs par défaut et, dans ce gestionnaire d'événements, de les définir sur leurs valeurs par défaut.

0
aidonsnous

Cela fera:

$("#form input:hidden").val('').trigger('change');
0
user4877292

Comment je le ferais est de mettre un écouteur d'événement sur l'événement de modification du champ masqué. Dans cette fonction d'écoute, vous pouvez enregistrer la valeur initiale dans le stockage d'élément DOM ( mootools , jquery ), puis écouter l'événement de réinitialisation du formulaire pour restaurer les valeurs initiales stockées dans le stockage de champ de formulaire masqué .

0
ChrisR

Vous pouvez réinitialiser la valeur du champ d'entrée masqué à l'aide de la ligne ci-dessous. Il vous suffit de modifier l'ID de votre formulaire au lieu de frmForm.

$("#frmForm input:hidden").val(' ');
0
Rutvik kakadiya

Créez un bouton et ajoutez du code JavaScript à l'événement onClick qui efface les champs.

Cela dit, je suis curieux de savoir pourquoi vous souhaitez réinitialiser ces champs. Ils contiennent généralement des données internes. Si je les effaçais dans mon code, la publication du formulaire échouerait (par exemple après que l'utilisateur ait entré les nouvelles données et tenté de soumettre le formulaire).

[EDIT] J'ai mal compris votre question. Si vous craignez que quelqu'un ne modifie les valeurs des champs cachés, il n'y a aucun moyen de les réinitialiser. Par exemple, vous pouvez appeler reset() sur le formulaire, mais pas sur un champ du formulaire.

Vous pourriez penser que vous pouvez enregistrer les valeurs dans un fichier JavaScript et l'utiliser pour les réinitialiser, mais lorsqu'un utilisateur peut modifier les champs masqués, il peut également modifier le code JavaScript.

Donc, du point de vue de la sécurité, si vous devez réinitialiser les champs cachés, évitez-les d'abord et enregistrez les informations dans la session sur le serveur.

0
Aaron Digulla