Ajout et suppression d'éléments d'entrée dans des formulaires créés dynamiquement

Question

J'ai une page "messages" où il est possible de commenter chaque message. Je fais une zone de texte de type facebook où, lorsque vous vous concentrez, le bouton "soumettre" s'affiche et lorsque vous le nettoyez, il se cache à nouveau. Jusqu'à présent, j'ai essayé différentes choses:

<script type="text/javascript"> 
function focusTextarea(id) { 
     var form = document.forms[id]; 

     //Create an input type dynamically. 
     var element = document.createElement("input"); 

     //Assign different attributes to the element. 
     element.setAttribute("type", "submit");0 
     element.setAttribute("value", "Post comment"); 
     element.setAttribute("name", "createComment"); 
     element.setAttribute("class", "okButton"); 
     element.setAttribute("id", "test"); 

     var foo = document.getElementById("commentButton"); 

     //Append the element in page (in span). 
     form.appendChild(element); 

} 

function unFocusTextarea(id) { 
    var test = document.getElementById(id); 

    var foo = document.getElementById("commentButton"); 
    var foo2 = document.getElementById("test"); 

    foo.removeChild(foo2); 
} 
</script> 

L'identifiant de paramètre est le nom et l'identifiant du formulaire. En première fonction, je veux trouver le formulaire et insérer un bouton de soumission. La deuxième fonction que je veux retrouver le formulaire et supprimer le bouton.

Merci à l'avance

Answer 1

a fini par utiliser jquery à la place:

function focusTextarea(id) { 
    if($("#"+id+" #comment_"+id).val() == "Write a comment..") { 
     $("#"+id+" #comment_"+id).val(""); 
     $("#"+id+" #commentTools_"+id).append("<input type='checkbox' name='createPrivate' value='1'> <span class='normal'>Private</span><br><input type='submit' name='createSubmit' value='Post comment' class='okButton'>"); 
     $("#"+id+" #comment_"+id).rows = 5; 
    } 
} 

function unFocusTextarea(id) { 
    if($("#"+id+" #comment_"+id).val() == "Write a comment.." || $("#"+id+" #comment_"+id).val() == "") { 
     $("#"+id+" #commentTools_"+id).empty(); 
     $("#"+id+" #comment_"+id).val("Write a comment.."); 
    } 
} 

Merci quand même :)

Answer 2

Je ne vois pas ce que vous aimez pointer avec

document.getElementById("commentButton"); 

Cependant, cela devrait être un moyen simple:

function unFocusTextarea(id) { 
var form = document.getElementById(id); 
if(form.lastChild.name=="createComment")form.removeChild(form.lastChild) 
} 

Comme le bouton (s'il existe) est toujours le lastChild du formulaire, il ne regarde que ce lastChild et vérifie si le nom-attributs correspond à la valeur donnée (createComment). Si c'est le cas, le bouton sera supprimé.

Answer 3

Pour ce que vous voulez faire, vous ne devriez pas créer et supprimer des objets, vous pouvez simplement cacher un objet en utilisant CSS. Définissez la propriété .style.display d'un élément DOM sur "none" lorsque vous le souhaitez, et tous ses éléments enfants, pour être masqués, et sur "" lorsque vous souhaitez qu'ils s'affichent. En ce qui concerne votre code actuel, je ne pense pas que document.forms fasse ce que vous pensez. Un formulaire n'est pas une portée, c'est un élément DOM, et vous devriez le faire comme n'importe quel autre: document.getElementById("formid").