C'est à dire est de ne pas se soumettre; ajouter dynamiquement des éléments de formulaire, est-ce un IE bug?
J'ai écrit un peu de Javascript pour permettre l'édition d'une liste d'éléments dans un formulaire HTML, y compris l'ajout et la suppression d'éléments. Ai eu de travail dans Firefox. Lorsque l'essayer dans Internet Explorer, j'ai trouvé que l'ajout de points n'ont pas été soumis avec le formulaire.
Longue histoire courte... beaucoup de simplification, de débogage, de comprendre ce ligne est de déclenchement, c'est à dire ignorer le nouveau formulaire de saisie. Ainsi, le comportement problème est résolu.
Mais maintenant, je dois demander: Pourquoi? Est-ce un IE bug?
Voici le code simplifié:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function add() {
div = document.getElementById("mylist");
//*** Adding text here works perfectly fine. ***
div.innerHTML += " ";
e = document.createElement("input");
e.setAttribute("type", "text");
e.setAttribute("name", "field3");
e.setAttribute("value", "--NEWVALUE--");
div.appendChild(e);
//*** Adding text here works perfectly fine in Firefox, but for
// Internet Explorer it causes field3 to not be submitted. ***
//div.innerHTML += " ";
}
</script>
</head>
<body>
<form action="" method="get">
<div id="mylist">
<input type="text" name="field1" value="value1" />
<input type="text" name="field2" value="value2" />
</div>
<a href="javascript:" onclick="add()" />Add</a>
<input type="submit" value="Submit" />
</form>
</body>
</html>
De l'essayer, ne l'évidence: la charge dans internet explorer, cliquez sur Ajouter, cliquez sur envoyer, regardez ce qui se trouve dans la barre d'adresse. Si vous supprimez la dernière ligne add()
, c'est à dire un coup d'arrêt rapports field3
. Il fonctionne très bien de toute façon dans Firefox.
Des idées? Un esprit curieux veut savoir. (Et comment puis-je ajouter du texte si besoin, dans un portable de la mode, de sorte que IE est heureux?)
OriginalL'auteur Jeremy Frank | 2009-03-04
Vous devez vous connecter pour publier un commentaire.
Semble donc. Lorsque vous créez un <input> élément à travers les méthodes du DOM, c'est à dire ne pas tout ramasser l'attribut "name". C'est une sorte de y que l'élément ne doit présenter, mais si vous essayez d'obtenir un ‘innerHTML’ la représentation de l'élément disparaît mystérieusement. Cela ne se produit pas si vous créez l'élément en écrivant directement à innerHTML.
Aussi, si vous utilisez DOM Niveau 0 de la forme de méthodes de navigation, comme " monformulaire.éléments.x.valeur", l'accès par les ‘éléments’ tableau peut ne pas fonctionner (de la même manière directe ‘myform.x l'accès de certaines personnes misguidedly utilisation). En tout cas ces jours-ci, vous pourriez préférer getElementById().
Donc soit utiliser innerHTML ou utiliser les méthodes du DOM; mieux de ne pas les mélanger lors de la création de champs de formulaire.
C'est documentée (voir "Remarques") et, enfin, fixe dans IE8.
Dans tous les cas, ne jamais faire:
Ce n'est que sucre syntaxique pour:
En d'autres termes, il doit serialise la totalité de l'enfant contenu HTML de l'élément, puis de faire de la concaténation de chaîne, puis de le ré-analyser la nouvelle chaîne de retour dans l'élément, de jeter tout le contenu d'origine. Cela signifie que vous perdez quelque chose qui ne peut pas être sérialisé: ainsi que IE faux demi-créé le ‘nom’ attributs qui signifie également que tout JavaScript gestionnaires d'événements, les DOM, les Auditeurs ou les autres propriétés personnalisées que vous avez attaché à chaque élément d'enfant. Aussi, inutile serialise/parse cycle est lente.
OriginalL'auteur bobince
C'est à dire est très pointilleux sur la modification de certaines propriétés intégrées au moment de l'exécution. Par exemple, le nom d'un élément d'entrée ne peut pas être modifié pendant l'ensemble.
Deux choses que je voudrais essayer, si j'étais vous:
Au lieu d'utiliser
setAttribute()
, essayez de définir laname
,type
etvalue
propriétés explicitement:e.name = "text";
Si cela ne fonctionne pas, vous devrez peut-être inclure tous ces attributs dans le
document.createElement()
appel:var e = document.createElement("<input type='text' name='field'>");
cela peut effectivement générer une exception dans certains navigateurs. De sorte que le meilleur navigateur croix de chemin à parcourir serait:
.
Je suis d'accord à ce sujet étant un hack, c'est pourquoi je suggère l'affiche, essayez de régler les propriétés de la première. Si cela ne fonctionne pas, je ne vois pas une autre façon de faire ce qu'il veut produire.
OriginalL'auteur levik
Merci bobince et levik pour vos réponses. À l'aide de ceux-ci, et certains plus d'expérimentation, voici mes conclusions:
Oui, c'est un IE bug.
IE 8 corrige le bug suivant Microsoft: "Internet Explorer 8 et versions ultérieures pouvez définir le NOM de l'attribut au moment de l'exécution sur des éléments créés dynamiquement avec la méthode createElement."
Le bug est présent: l'Appel de
e.setAttribute("name", "field3")
seulement type de définit le nom. Il ne fonctionnera que si rien ne se passe à l'élément, mais si demandé à sérialiser, le nom n'est pas sérialisé. Alors, quand j'ai ditinnerHTML += " "
qui ont forcé une sérialisation, qui a perdu le nom, de sorte qu'il n'a pas été retrouvé lors de la désérialisation. Pas de nom, pas d'intégration dans la soumission du formulaire.Solution n ° 1:
e = document.createElement("<input name='field3' />")
, même lorsqu'ils sont confrontés avec la sérialisation.Solution n ° 2: Plutôt que d'ajouter du texte en utilisant innerHTML +=, je peux ajouter un élément de texte comme ceci:
div.appendChild(document.createTextNode(" "));
. J'avais pensé il doit y avoir une meilleure façon d'ajouter du texte, et maintenant je le sais :-).Acclamations,
--jsf
OriginalL'auteur Jeremy Frank