Comment créer un <input type="text"/> dynamiquement ?

Question

Je souhaite créer dynamiquement une entrée de type texte dans mon formulaire web. Plus précisément, j'ai un champ de texte dans lequel l'utilisateur entre le nombre de champs de texte souhaités ; je veux que les champs de texte soient générés dynamiquement dans le même formulaire.

Comment faire ?

Answer 1

Essayez ceci :

function generateInputs(form, input) {
  x = input.value;
  for (y = 0; x > y; y++) {
    var element = document.createElement('input');
    element.type = "text";
    element.placeholder = "New Input";
    form.appendChild(element);
  }
}

input {
  padding: 10px;
  margin: 10px;
}

<div id="input-form">
  <input type="number" placeholder="Desired number of inputs..." onchange="generateInputs(document.getElementById('input-form'), this)" required><br>
</div>

Le code ci-dessus comporte un formulaire avec une entrée qui accepte un nombre :

<form id="input-form">
  <input type="number" placeholder="Desired number of inputs..." onchange="generateInputs(document.getElementById('input-form'), this)"><br>
</form>

L'entrée exécute une fonction onchange Cela signifie que lorsque l'utilisateur a saisi un nombre et cliqué sur "submit", une fonction est exécutée. L'utilisateur est requis pour compléter l'entrée avec une valeur avant de la soumettre. Cette valeur doit être numérique. Une fois soumis, le formulaire parent et l'entrée sont transmis à la fonction :

...
generateInputs(document.getElementById('input-form'), this)
...

Le générateur boucle alors en fonction de la valeur donnée dans l'entrée :

...
x = input.value;
for (y=0; x>y; y++) {
...

Il génère ensuite une entrée à l'intérieur du formulaire, à chaque boucle :

...
var element = document.createElement('input');
element.type = "text";
element.placeholder = "New Input";
form.appendChild(element);
...

J'ai également ajouté quelques CSS pour faire de la inputs ont l'air bien, et d'autres placeholders également. Pour en savoir plus sur la création d'éléments createElement() :

https://www.w3schools.com/jsref/met_document_createelement.asp

Pour en savoir plus for boucles :

https://www.w3schools.com/js/js_loop_for.asp

Answer 2

• Interroger et obtenir l'élément DOM du conteneur

• Créer un nouvel élément

• Placer un nouvel élément dans l'arborescence du document

  //Query some Dib region you Created let container=document.querySelector("#CalculationInfo .row .t-Form-itemWrapper"); let input = document.createElement("input");

  //create new Element for apex input.setAttribute("type","text"); input.setAttribute("size","30"); containter.appendChild(input); // put it into the DOM

Answer 3

<button id="add" onclick="add()">Add Element</button>

<div id="hostI"></div>

<template id="templateInput">
    <input type="text">
</template>

<script>
    function add() {

        // Using Template, element is created
        var templateInput = document.querySelector('#templateInput');
        var clone = document.importNode(templateInput.content, true);

        // The Element is added to document
        var hostI = document.querySelector('#hostI');
        hostI.appendChild(clone);
    }

</script>

Les modèles HTML sont désormais les normes recommandées pour générer du contenu dynamique.