jquery ajoute plusieurs entrées

Dans le développement front-end, jQuery peut être utilisé pour implémenter facilement la fonction d'ajout dynamique de zones de saisie. Cette fonctionnalité est très utile lorsque les utilisateurs doivent saisir plusieurs contenus. Elle peut rendre notre application plus flexible, capable de répondre aux besoins des utilisateurs et d'améliorer l'expérience utilisateur. Ci-dessous, je vais vous présenter comment utiliser jQuery pour ajouter plusieurs zones de saisie.

Idée de base

Notre objectif est d'ajouter dynamiquement plusieurs zones de saisie, nous devons donc d'abord déterminer une idée de base. Nous ajouterons un bouton à la page, et lorsque l'utilisateur cliquera sur le bouton, une nouvelle zone de saisie sera générée dynamiquement. De plus, nous devons également définir certaines propriétés et styles de la zone de saisie.

Étape 1 : partie HTML

Tout d'abord, ajoutez un bouton et un conteneur pour contenir la nouvelle zone de saisie dans le code HTML. Le conteneur peut être une balise

, ou un élément de type "text" avec une balise

Ajouter une zone de saisie

Comme vous pouvez le voir, nous donnons le bouton et Les conteneurs définissent chacun un identifiant, qui sera utilisé dans le code JavaScript ultérieur.

Étape 2 : partie CSS

Puisque nous devons ajouter des zones de saisie de manière dynamique, nous devons définir certains styles et attributs pour la nouvelle zone de saisie afin qu'elle ressemble aux autres zones de saisie.

input-container input {

margin-bottom: 10px;
display: block;
}

Ici, nous définissons un style et définissons une marge inférieure et un attribut d'affichage au niveau du bloc pour la nouvelle zone de saisie.

Étape 3 : partie du code jQuery

Maintenant, nous pouvons écrire du code jQuery pour implémenter la fonction d'ajout dynamique d'une nouvelle zone de saisie.

$(document).ready(function() {
$("#add-input").click(function() {

$("#input-container").append('<input type="text" name="input[]" />');

});
});

Tout d'abord, nous utilisons le document.ready événement pour garantir que le code s’exécute après le chargement de la page. Nous définissons ensuite un événement de clic pour le bouton, qui ajoutera une nouvelle zone de saisie au conteneur lorsque le bouton est cliqué. Ici, nous utilisons la méthode append() de jQuery pour ajouter une nouvelle zone de saisie au conteneur en utilisant la syntaxe HTML.

De plus, nous avons également défini un nom pour la nouvelle zone de saisie comme "input[]", ce qui facilitera notre traitement dans le code PHP en arrière-plan.

Enfin, nous ajoutons du code supplémentaire pour supprimer la zone de saisie nouvellement ajoutée :

$(document).on('click', '.remove-input', function() {
$(this). parent() .remove();
});

Ce code définira un événement de clic pour chaque zone de saisie que nous ajoutons, et lorsque l'utilisateur clique sur le bouton Supprimer, il supprimera la zone de saisie.

Résumé

Dans cet article, nous utilisons jQuery pour compléter la fonction d'ajout dynamique de plusieurs zones de saisie. jQuery est un outil très puissant qui nous permet de réaliser plus facilement diverses interactions et d'améliorer l'expérience utilisateur. En modifiant le code de cet article, vous pouvez le rendre plus adapté à votre propre application.

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!

Déclaration de ce site Web

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