Formulaire dynamique avec javascript

Modifier le nombre d'input

Description

Cette page permet, entre autre, de répondre à la question: comment créer un formulaire avec un nombre variable de champs ? par exemple ici avec un champ numérique, en fonction duquel le formulaire lui-même s'adapte automatiquement.
On peut imaginer par exemple aussi des champs de formulaires optionnels, et qui ne sont présents qu'en fonction des réponses à des questions précédentes.
L'exemple ci-dessous permet de choisir le nombre de valeurs numériques que l'on souhaite saisir ensuite. On peut, bien sûr, ensuite récupérer les valeurs de chaque champ pour un usage ultérieur (ici simplement de les afficher).

Éléments javasript

On crée un champ, vide en html, destiné à contenir les futurs champs. Via les méthodes lastChild et removeChild, on peut (ré)initialiser ce champ en y supprimant tous les éléments.
La méthode hasChildNodes permet de tester di des éléments sont encore présents.

Les méthodes createTextNode et createElement permettent de créer dans notre document de nouveau élements: du texte et ici un élément de type "input":

document.createTextNode("nouveau texte")
document.createElement("input")

Enfin, la méthode appendChild permet, comme son nom l'indique, d'ajouter les éléments précedemment créer à celui qui nous intéresse.

Code javascript & html

Tout d'abord le formulaire à proprement parler:

<form id="globalform" style="width:11.5em;border:5px ridge blue">
<label>Nombre d'input:</label>
<input type="number" id="N" min="0" value="3" max="15" step="1" 
   style="width:2.5em" onchange="Chbx();return false;">
<br>
<div id="InputFields"></div>
<br>
<input type="button" id="bt" onclick="Disp();return false;">
</form>

et le javascript:

<script>
function Chbx() {
    Fields=document.getElementById("InputFields");
    N=document.getElementById("N").value;
    while (Fields.hasChildNodes()) {Fields.removeChild(Fields.lastChild);}
    for (i=0;i<N;i++) {
       Fields.appendChild(document.createTextNode("Input " + (i+1)+" "));
       var input = document.createElement("input");
       input.type = "number";
       input.name = "n" + i;
       input.min=0;input.max=50;input.step=1;
       input.style = "width:2.5em;"
       input.id = "k" + i;
       Fields.appendChild(input);
       document.getElementById("k"+i).value=25;
       Fields.appendChild(document.createElement("br"));
    }
document.getElementById("bt").value="Afficher les "+N+" valeurs";
}

function Disp() {
  N=document.getElementById("N").value;
  ValueList="";
  for (i=0;i<N;i++) {
       ValueList+=document.getElementById("k"+i).value+"\n";
  }  
  alert(ValueList);
}

Chbx();
</script>