Ajout de champ de texte sur clic

Résolu/Fermé
othmane - 18 avril 2008 à 11:41
 othmane - 18 avril 2008 à 21:42
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
Dacobah Messages postés 260 Date d'inscription samedi 26 novembre 2005 Statut Membre Dernière intervention 28 septembre 2011 74
18 avril 2008 à 19:12
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.
1
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
0
foufita Messages postés 68 Date d'inscription mercredi 29 août 2007 Statut Membre Dernière intervention 10 mars 2014 8
18 avril 2008 à 16:16
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>
0
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
0