Comment puis-je générer dynamiquement des éléments de formulaire de saisie en fonction de la saisie de l'utilisateur ?

Génération dynamique d'éléments de formulaire de saisie en fonction de la saisie de l'utilisateur

Lorsqu'on se voit confronté à la tâche d'ajouter un nombre spécifique d'éléments de formulaire de saisie, il est naturel de rechercher des solutions simples et efficaces .

Dans ce scénario, nous avons une structure HTML composée d'un champ de saisie dans lequel les utilisateurs saisissent une valeur représentant le nombre souhaité de champs de saisie. En cliquant sur un lien, le nombre correspondant de champs de saisie doit être généré dynamiquement.

Récupération des entrées de l'utilisateur

Pour récupérer la valeur entière saisie par l'utilisateur, nous pouvons utiliser un gestionnaire d'événements onclick attaché au lien. En attribuant un identifiant unique au champ de saisie, nous pouvons accéder à sa valeur à l'aide de document.getElementById() :

<code class="javascript">var number = document.getElementById("member").value;</code>

Créer et ajouter des éléments de saisie

Pour efficacement ajoutez les éléments d'entrée, nous vous recommandons de créer un élément conteneur (par exemple, un

) où vous ajouterez les champs d'entrée nouvellement créés. En utilisant document.createElement(), nous pouvons créer les éléments d'entrée, spécifier leurs attributs et les ajouter au conteneur :

<code class="javascript">var container = document.getElementById("container");

for (i = 0; i < number; i++) {
  // Append a text node
  container.appendChild(document.createTextNode("Member " + (i + 1)));

  // Create an input element
  var input = document.createElement("input");
  input.type = "text";
  input.name = "member" + i;
  container.appendChild(input);

  // Append a line break
  container.appendChild(document.createElement("br"));
}</code>

Cette approche vous permet de remplir dynamiquement le conteneur en fonction de l'entrée de l'utilisateur. Pensez à utiliser hasChildNodes() et removeChild() pour vider le conteneur avant d'ajouter de nouveaux éléments afin de garantir que seuls les champs pertinents sont affichés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html Integer using Event append number this input Access

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn