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

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

Barbara Streisand

Libérer： 2024-10-27 10:16:30

original

220 Les gens l'ont consulté

How Can I Dynamically Generate Input Form Elements Based on User Input?

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>

Copier après la connexion

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>

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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