Ajout de champ de texte sur clic [Résolu/Fermé]

Signaler
-
 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

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>
2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
260
Date d'inscription
samedi 26 novembre 2005
Statut
Membre
Dernière intervention
28 septembre 2011
71
Bon, peut-être que tu pourrais essayer ça dans ce cas :

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
Messages postés
68
Date d'inscription
mercredi 29 août 2007
Statut
Membre
Dernière intervention
10 mars 2014
8
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>
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