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 dc6dce4a544fdca2df29d5ac0ea9906b, ou un élément de type "text" avec une balise d5fd7aea971a85678ba271703566ebfd

0f72cbf6a93e8f9615a6d8d8c8ff7efdAjouter une zone de saisie65281c5ac262bf6d81768915a4a77ac0
116f2b872f57782f800a99b06420b14116b28748ea4df4d9c2150843fecfba68

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!