ajouter des entrées à la forme html, en utilisant javascript

J'ai un formulaire html que je voudrais ajouter des champs d'entrée à l'aide de javascript. Au départ, j'avais les champs de saisie par eux-mêmes sous le « corps », et le suivant a été en mesure d'ajouter les champs:ajouter des entrées à la forme html, en utilisant javascript

  // Create number input field 
      var phoneInput = document.createElement("INPUT"); 
      phoneInput.id = "phone" + instance; 
      phoneInput.name = "phone" + instance; 
      phoneInput.type = "text"; 

      // Insert that stuff 
      document.body.insertBefore(document.createElement("BR"), element); 
      document.body.insertBefore(phoneLabel, element); 
      document.body.insertBefore(phoneInput, element);

Je puis ajouté un élément « forme » autour des entrées originales dans le fichier html.

<body> 
    <form action=searchform.php method=GET> 
     <LABEL for="phone1">Cell #: </LABEL> 
     <input id="phone1" type="text" name="phone1"> 
     <input type="button" id="btnAdd" value="New text box" onclick="newTextBox(this);" /> 
    </form> 
    </body>

Maintenant, le bouton n'ajoute pas de nouvelles zones de texte. Ai-je mal structuré cela? Merci!

Source

2009-12-23 Matt

C'est parce que vous apposent les éléments du corps, ce qui signifie que insertBefore ne peut pas trouver element (parce qu'il est dans le <form>, pas le <body>), donc il n'est inséré jamais.

Un moyen rapide de résoudre ce problème serait d'utiliser document.body.firstChild.insertBefore. Toutefois, si le formulaire n'est plus le premier élément du body, cela ne fonctionnera plus.

Un nettoyeur, un meilleur moyen serait de donner à votre formulaire un ID (par exemple <form id="myform">), puis accéder au formulaire en utilisant: document.getElementById("myform").insertBefore. Ensuite, vous pouvez placer votre formulaire n'importe où, et il sera toujours accessible en utilisant l'identifiant.

Source

2009-12-23 08:00:25

hmmm, Incase le corps avait beaucoup plus enfants, y a-t-il un moyen d'étiqueter le formulaire avec un identifiant, et de faire pointer l'insertBefore? Merci. – Matt

n'a pas vu le reste de la réponse. Merci mec! – Matt

De rien! –

Gve la forme d'un identifiant

<form id="myForm" action="searchform.php" method="GET">

Créer les éléments JavaScript comme vous l'habitude, vous pouvez simplement ajouter les éléments comme ceci:

var f = document.getElementById('myForm'); 
f.appendChild(document.createElement('br')); 
f.appendChild(phoneLabel); 
f.appendChild(phoneInput);

(insertbefore travaillerait sur f comme bien, bien que je pense que c'est plus lisible.)

Source

2009-12-23 08:04:20

Le plus simple serait d'utiliser jQuery. Ajouter un ID à votre formulaire, pour faciliter la consultation:

<form id="myform" action="action" method="GET"> 
    <input type="hidden" name="a" value="1"/> 
    <input type="hidden" name="b" value="2"/> 
</form> 

<script type="text/javascript"> 
    $("#myform").append('<input type="hidden" name="c" value="3"/>'); 
</script>

Vous pouvez ensuite modifier la valeur de votre nouvelle entrée, en se référant facilement à elle:

$("#myform input[name='c']").val(7);

Source

2009-12-23 08:04:20

ajouter des entrées à la forme html, en utilisant javascript

Répondre

Questions connexes