J'ai une liste déroulante qui construit une forme basée sur les sélections sélectionnées. Donc, si une personne sélectionne 'foobar', il affiche un champ de texte, s'ils choisissent "fromage", il affiche des boutons radio. L'utilisateur peut ensuite entrer des données dans ces formulaires au fur et à mesure. Le seul problème est que lorsqu'ils ajoutent un nouvel élément de forme, tout le reste des informations est effacé. IM en utilisant actuellement les éléments suivants pour effectuer au formulaire:
document.getElementById('theform_div').innerHTML =
document.getElementById('theform_div').innerHTML + 'this is the new stuff';
5 Réponses :
Réglage Vous devez créer un arborescence DOM séparé et l'ajouter en appelant Par exemple: P> innerhtml code> détruit le contenu de l'élément et la reconstruit à partir du HTML. appendicchild code>. P> var container = document.createElement("div");
container.innerHTML = "...";
document.getElementById("theform_div").appendChild(container);
N'utilisez pas Exemple innerhtml pour créer les éléments de formulaire. Avec innerhtml Vous écrasez l'ancien HTML avec le nouveau HTML qui recréera tous les éléments. Au lieu de cela, vous devez utiliser le DOM pour créer et ajouter les éléments.
La façon la plus correcte de le faire sans utiliser de cadre (comme JQuery, Dojo, Yui) est la suivante: innerhtml , bien que supporté par la plupart des navigateurs, n'est pas conforme standard et - donc non garanti de fonctionner.
Étape 1:
Ajouter jQuery à vos en-têtes: P>
$("#theform_div").append("your_new_html_goes_here");
Cela a fonctionné pour moi, je devais ajouter des éléments imbriqués (