4

Si je mets un contrôle de formulaire sur la page avec un value déjà défini, le déclenchement de la fonctionnalité de réinitialisation du formulaire conteneur retournera la valeur à la valeur d'origine au moment où la page a été chargée.Comment puis-je empêcher une réinitialisation de formulaire d'effacer mon élément <input type = "text">?

Toutefois, si je crée un contrôle de formulaire à l'aide de javascript et l'ajoute au DOM, le contrôle de formulaire sera effacé et rendu vide lorsque le formulaire est réinitialisé. Comment puis-je empêcher ce comportement? Je voudrais donner à l'entrée une valeur par défaut, donc il sera traité de la même manière qu'un contrôle qui était sur la page au chargement de la page. Dans l'exemple suivant, cliquer sur RESET efface une entrée (celle ajoutée par un script), mais pas l'autre (statique). Ce que je veux, c'est que les deux intrants conservent leur valeur.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.sourceforge.net/" xml:lang="en" lang="en"> 
    <head> 
    </head> 
    <body> 
     <form id="container"> 
      <input type="reset" value="RESET" /> 
      <input type="text" value="DefaultValue" /> 
     </form> 
     <script type="text/javascript"> 
     window.onload = function() { 
      var input = document.createElement('input'); 
      input.setAttribute('value', 'DefaultValue2'); 
      document.getElementById('container').appendChild(input); 
     }; 
     </script> 
    </body> 
</html> 

Bien que je ne l'ai pas inclus jQuery dans ce simple cas de test, mon projet utilise jQuery, et je serais heureux d'une solution jQuery.

Répondre

11

La forme reset() utilise la propriété defaultValue, donc tout ce que vous devez faire est de définir que ...

window.onload = function() { 
    var input = document.createElement('input'); 
    input.value = input.defaultValue = 'DefaultValue2'; 
    document.getElementById('container').appendChild(input); 
}; 
+0

+1 Nice, je ne savais pas à propos de 'defaultValue'. –

+0

Génial! Merci. – RMorrisey

0

Les formulaires ont un événement onreset qui, selon ppk est disponible dans plusieurs navigateurs. Si l'élément Javascript créé n'est pas réinitialisé à sa valeur initiale lorsque vous appuyez sur le bouton de réinitialisation, vous pouvez utiliser l'événement pour le réinitialiser "manuellement". Cependant, par ma testing réinitialisation d'un élément créé javascript (j'utilise Prototype dans mon exemple mais cela ne devrait pas faire de différence) fonctionne dans Firefox 3.6 et Chrome 5 sans avoir besoin d'un gestionnaire supplémentaire onreset (mais pas dans IE6).

0

Vous devrez ajouter plus de fonctionnalités à l'entrée 'reset' par défaut, par exemple vous pouvez utiliser l'événement onReset pour définir input's value = 'defaultvalue2'. Cela réinitialiserait les deux champs d'entrée, l'un statiquement et l'autre via la méthode onReset.