Comment créer dynamiquement un champ de saisie en JavaScript

Posté Par: Windows2022tutosur: décembre 14, 2022Dans: TechPas De Commentaires

Comment créer dynamiquement un champ de saisie en JavaScript

Introduction

Dans ce tutoriel, nous allons créer un Comment créer dynamiquement un champ de saisie en JavaScript. Ce tutoriel a pour objectif d’apprendre à créer dynamiquement un champ de saisie. Cela couvrira toutes les fonctions de base qui montreront l’ajout d’un nouveau champ de saisie. Je vais fournir un exemple de programme pour montrer le codage réel de ce tutoriel.

Ce tutoriel est simple et facile à comprendre, il suffit de suivre les instructions que j’ai fournies et vous pouvez le faire sans problème. Ce programme peut être utilisé pour n’importe quel formulaire nécessitant plus d’informations. Je ferai de mon mieux pour vous fournir le moyen le plus simple de créer ce programme Champ de saisie dynamique. Faisons donc le codage.

Avant de commencer :

Ceci est le lien pour le modèle que j’ai utilisé pour la conception de la mise en page https://getbootstrap.com/.

Création de l’interface

C’est ici que nous allons créer une interface simple pour notre application. Ce code n’affichera que les entrées de formulaire et le bouton. Pour le créer, copiez-le simplement et écrivez-le dans votre éditeur de texte, puis enregistrez-le sous index.html.

<!DOCTYPE html>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
	<div class="col-md-6 well">
		<h3 class="text-primary">How to Create Input Field Dynamically in JavaScript</h3>
		<hr style="border-top:1px dotted #ccc;"/>
				<div id="forms" class="form-inline">
					<input type="text" class="form-control" style="width:80%;" placeholder="Please enter here" name="form[]">
				<button type="button" class="btn btn-primary" onclick="addField();">Add Field</button>

Création d’une fonction JavaScript

C’est là que se trouve la fonction principale de l’application. Ce code ajoutera dynamiquement un nouveau champ de saisie lorsque le bouton sera cliqué. Pour ce faire, copiez et écrivez simplement ce bloc de codes dans l’éditeur de texte et enregistrez-le sous script.js.

var fieldId = ;
 
function addElement(parentId, elementTag, elementId, html){
	var id = document.getElementById(parentId);
	var newElement = document.createElement(elementTag);
	newElement.setAttribute('id', elementId);
	newElement.innerHTML = html;
	id.appendChild(newElement);
 
}
 
function removeField(elementId){
	var fieldId = "field-"+elementId;
	var element = document.getElementById(fieldId);
	element.parentNode.removeChild(element);
}
 
function addField(){
	fieldId++;
	var html = '<br /><input type="text" name="form[]" class="form-control" placeholder="Please enter here" style="width:80%;">' + '<button onclick="removeField('+fieldId+');"><span class="glyphicon glyphicon-minus"></span></button><br />';
	addElement('forms', 'div', 'field-'+ fieldId, html);
}

Dans la première ligne de code, nous créons une variable appelée ID de champ, cela agit comme l’identifiant de l’entrée que nous créons. Nous allons ensuite créer une méthode appelée ajouterÉlément(), cette méthode sera celle qui créera dynamiquement un nouveau champ de saisie. Cela inclut toute la création d’un nouvel élément et l’ajoute au parent ciblé. Ensuite, nous créons la méthode d’entrée de suppression appelée supprimerChamp()cette fonction a pour but de supprimer le champ cible lorsque vous avez cliqué sur le bouton.

Production:

La Comment créer dynamiquement un champ de saisie en JavaScript le code source que je fournis peut être téléchargé ci-dessous. Veuillez cliquer sur le bouton de téléchargement.

Voilà, nous avons créé avec succès Comment créer dynamiquement un champ de saisie en JavaScript. J’espère que ce tutoriel simple vous aidera à ce que vous recherchez. Pour plus de mises à jour et de tutoriels, veuillez simplement visiter ce site. Profitez du codage !

Plus de tutoriels pour le langage JavaScript

Tutoriels JavaScript

Télécharger ici