Ajout de champ de texte sur clic
Résolu
othmane
-
othmane -
othmane -
Bonjour!! je suis débutant en javascript et voici mon problème:
J'ai crée une interface graphique dont l'une des pages est une sorte de formulaire avec plusieurs champs à remplir . Mon but est de créer un champ dynamique : à chaque clic sur un bouton, un nouveau champ doit s'ajouter à la page de base. Par exemple : je désire créer un champ dans lequel l'utilisateur peut entrer ses adresses mail. Il n'y a qu'un champ à la base, mais si l'utilisateur a plusieurs adresses, il doit pouvoir, en cliquant sur un bouton "ajouter", rentrer toutes ses adresses. Champ 1 pour l'adresse 1; champ 2 pour l'adresse 2...et ce de manière infinie!
remarque: je travaille avec du jsp
J'ai crée une interface graphique dont l'une des pages est une sorte de formulaire avec plusieurs champs à remplir . Mon but est de créer un champ dynamique : à chaque clic sur un bouton, un nouveau champ doit s'ajouter à la page de base. Par exemple : je désire créer un champ dans lequel l'utilisateur peut entrer ses adresses mail. Il n'y a qu'un champ à la base, mais si l'utilisateur a plusieurs adresses, il doit pouvoir, en cliquant sur un bouton "ajouter", rentrer toutes ses adresses. Champ 1 pour l'adresse 1; champ 2 pour l'adresse 2...et ce de manière infinie!
remarque: je travaille avec du jsp
A voir également:
- Ajout de champ de texte sur clic
- Transcription audio en texte word gratuit - Guide
- Traitement de texte gratuit - Guide
- Texte de barra - Guide
- Excel cellule couleur si condition texte - Guide
- Convertisseur récupération de texte - Guide
3 réponses
merci de votre aide j'ai pu trouver le bon script qui permet de faire d'ajouter un champ de txt en cliquant sur un bouton ou un lien :
<script type="text/javascript">
var i=0;
function addSelect(){
i++;
// On récupère l'endroit où devra être ajouté la liste
var divCible = document.getElementById("divCible");
// On récupère la liste modèle
var selModele = document.getElementById("cadre");
// On la clone dans une nouvelle variable
var nvxSel = selModele.cloneNode(true);
// (pour la présentation, on crée un retour à la ligne)
var br = document.createElement("<br>");
// On adapte les attributs de la nouvelle liste : nom, id et affichage
nvxSel.name = "cadre"+i;
nvxSel.id = "cadre"+i;
// On ajoute tout ça à l'emplacement voulu
Ajouter();
nvxSel.value='';
divCible.appendChild(nvxSel);
divCible.appendChild(br);
}
var nlignes = 1;
function Ajouter(){
nlignes++;
divCible.insertAdjacentHTML('BeforeEnd','');
/*divCible.innerHTML='<strong> <br>Patente'+nlignes+' :</strong>';*/
return nlignes;
}
</script>
il suffit de mettre ce code entre les balises <head></head>
ou le définir sur un document.js et l'appeler par
<script language="JavaScript" src="document.js"></script>
et enfin appeler sur cette fonction comme suit en ajoutant dans le formulaire:
<div id="divCible"><input type="text" name="des_act" id="des_act" >
<a href="javascript:addSelect();" >ajouter</a>
</div>
<script type="text/javascript">
var i=0;
function addSelect(){
i++;
// On récupère l'endroit où devra être ajouté la liste
var divCible = document.getElementById("divCible");
// On récupère la liste modèle
var selModele = document.getElementById("cadre");
// On la clone dans une nouvelle variable
var nvxSel = selModele.cloneNode(true);
// (pour la présentation, on crée un retour à la ligne)
var br = document.createElement("<br>");
// On adapte les attributs de la nouvelle liste : nom, id et affichage
nvxSel.name = "cadre"+i;
nvxSel.id = "cadre"+i;
// On ajoute tout ça à l'emplacement voulu
Ajouter();
nvxSel.value='';
divCible.appendChild(nvxSel);
divCible.appendChild(br);
}
var nlignes = 1;
function Ajouter(){
nlignes++;
divCible.insertAdjacentHTML('BeforeEnd','');
/*divCible.innerHTML='<strong> <br>Patente'+nlignes+' :</strong>';*/
return nlignes;
}
</script>
il suffit de mettre ce code entre les balises <head></head>
ou le définir sur un document.js et l'appeler par
<script language="JavaScript" src="document.js"></script>
et enfin appeler sur cette fonction comme suit en ajoutant dans le formulaire:
<div id="divCible"><input type="text" name="des_act" id="des_act" >
<a href="javascript:addSelect();" >ajouter</a>
</div>
Bon, peut-être que tu pourrais essayer ça dans ce cas :
A placer entre tes balises <head> et </head>
Et à placer dans ton formulaire :
Après il te reste à automatiser ce bout de code s'il fonctionne bien.
A placer entre tes balises <head> et </head>
<script type="text/javascript">
function AjoutChamp(nom)
{
document.getElementById('champs').innerHTML += '<input type="text" name='+nom+' />';
}
</script>
Et à placer dans ton formulaire :
<div id="champs"> <input type="text" name="pseudo" /> <a href="#" onclick="AjoutChamp(nom);">Cliquer ici pour ajouter un champ</a> <a href="#" onclick="AjoutChamp(prenom);">Cliquer ici pour ajouter un champ</a> </div>
Après il te reste à automatiser ce bout de code s'il fonctionne bien.
je viens d'essayer avec ce code là, mais ça marche pas ,
d'abord je sai pa pourkoi (href="#") ne marche pas car il m'envoie dans une autre page vide
donc je l'ai remplacé par <a href="javascript:AjoutChamp(nom);"> mais ça ossi ne marche pas ça m'indique "erreur sur la page" au niveau de la barre d'état
d'abord je sai pa pourkoi (href="#") ne marche pas car il m'envoie dans une autre page vide
donc je l'ai remplacé par <a href="javascript:AjoutChamp(nom);"> mais ça ossi ne marche pas ça m'indique "erreur sur la page" au niveau de la barre d'état
la solution est un bout du code java script :
<script>
function ajout_champ ()
{
document.write("<input type='text'/>");
}
</script>
<html>
<body>
<input name="" type="button" value="ajouter" onClick="ajout_champ ();">
</body>
</html>
<script>
function ajout_champ ()
{
document.write("<input type='text'/>");
}
</script>
<html>
<body>
<input name="" type="button" value="ajouter" onClick="ajout_champ ();">
</body>
</html>
slt foufita, merci de m'avoir répondu,
en fait j'ai essayé avec ce code là mais ça n'a pa marché car en cliquant sur le bouton ajouter ça renvois vers une nouvelle page, en plus comment identifier chaque champ ajouté , cad comment recupere les données dans les pages suivantes
et merci encore une fois
en fait j'ai essayé avec ce code là mais ça n'a pa marché car en cliquant sur le bouton ajouter ça renvois vers une nouvelle page, en plus comment identifier chaque champ ajouté , cad comment recupere les données dans les pages suivantes
et merci encore une fois
