High-Tech Santé Médecine Droit-Finances

Télécharger

MSN 2009

Rechercher : dans
Par :

Javascript ajouter des champs de saisie.

Dernière réponse le 16 mai 2008 à 17:30:14 Lazarey, le 16 mai 2008 à 16:26:12 
 Signaler ce message aux modérateurs

Bonjour toute la communauté.

J'ai un formulaire PHP.
J'aimerais y ajouter un champ de saisie <input type="text"> à chaque fois que j'appuie sur un boutton.
J'ai trouvé un code sur ce site :
http://www.developpez.net/forums/showthread.php?t=252724

Voici ce code : 

<script type="text/javascript">
 
var c,c2, ch;
 
// ajouter un champ avec son "name" propre;
function plus(){
c=document.getElementById('cadre');
c2=c.getElementsByTagName('input');
ch=document.createElement('input');
 
ch.setAttribute('type','text');
ch.setAttribute('name','ch'+c2.length);
c.appendChild(ch);
 
document.getElementById('sup').style.display='inline';
}
 
// supprimer le dernier champ;
function moins(){
if(c2.length>0){c.removeChild(c2[c2.length-1])}
if(c2.length==0){document.getElementById('sup').style.display='none'};
}
 
</script>

<form id="frm" action="">
<div id="cadre" style="margin-left:100px;width:200px">
</div>
 
<p>
<input type="button" value="ajouter un champ" onclick="plus()" />
<input type="button" style="display:none" id="sup" value="supprimer un champ" onclick="moins()" />
</p>
</form>


Il fonctionne très bien. Mais je voudrais ajouter un titre devant chaque input texte. Et aussi espacer les input texte car ils sont trop serrés.
J'ajoute que je suis très débutant en javascript et que jusqu'à maintenant, je n'ai fait que des vérifications de formulaires.

Si quelqu'un sait comment faire, merci beaucoup.


Configuration: Linux
Firefox 2.0.0.13

Meilleures réponses pour « Javascript ajouter des champs de saisie. » dans :
Javascript - Effacer un champ de formulaire lors du clic (focus) VoirIl vous est sûrement arrivé de tomber sur un formulaire HTML avec des valeurs pré-remplies décrivant par exemple le type de valeur attendue. L'intention est louable mais il est désagréable de devoir sélectionner ce texte et le supprimer avant de...
Formulaires en ligne - Les champs de saisie VoirQuelles données saisir ? Comment dois-je saisir l'information L'organisation des champs de saisie Séparer les champs de saisie L'organisation des champs et des titres La longueur des champs Quelles données saisir ? Sur la plupart des...
PHP - Récupération de données VoirPHP rend très simple la récupération de données envoyées par l'intermédiaire de formulaires HTML. Création d'un formulaire Grâce à la balise FORM du langage HTML, il est très simple de créer des formulaires comprenant : des champs de saisie des...
Javascript - L'objet Date VoirLes particularités de l'objet Date L'objet Date permet de travailler avec toutes les variables qui concernent les dates et la gestion du temps. Il s'agit d'un objet inclus de façon native dans Javascript, et que l'on peut toujours utiliser. La...
Javascript - l'objet Array VoirLes particularités de l'objet Array L'objet Array est un objet du noyau Javascript permettant de créer et de manipuler des tableaux. Voici la syntaxe à utiliser pour créer une variable tableau : var x = new Array(element1[, element2, ...]); Si...
Posez votre question Répondre

1

alexdelareunion, le 16 mai 2008 à 17:15:50
  • +1

<html>
<head>
<script type="text/javascript">
 
var c,c2, ch1, ch2;
 
// ajouter un champ avec son "name" propre;
function plus(){
c=document.getElementById('cadre');
c2=c.getElementsByTagName('input');
ch1=document.createElement('input');
ch2=document.createElement('input');
 
ch1.setAttribute('type','text');
ch1.setAttribute('name','ch1'+c2.length);
ch1.setAttribute('readonly','readonly'); 
ch1.setAttribute('value', 'etiquette'+c2.length/2);
ch1.setAttribute('style','border:none');

ch2.setAttribute('type','text');
ch2.setAttribute('name','ch2'+c2.length);
c.appendChild(ch1);
c.appendChild(ch2);
 
document.getElementById('sup').style.display='inline';
}
 
// supprimer le dernier champ;
function moins(){
if(c2.length>0){
	c.removeChild(c2[c2.length-1]);
	c.removeChild(c2[c2.length-1]);
}
if(c2.length==0){document.getElementById('sup').style.display='none'};
}
 
</script>
</head>
<body>
<form id="frm" action="">
<div id="cadre" style="margin-left:100px;width:200px">
</div>
 
<p>
<input type="button" value="ajouter un champ" onclick="plus()" />
<input type="button" style="display:none" id="sup" value="supprimer un champ" onclick="moins()" />
</p>
</form>
</body>
</html>

C'est un début, mais pour la mise en page c un peu la merde

   
Répondre à alexdelareunion

2

alexdelareunion, le 16 mai 2008 à 17:26:31

Lignes 14 à 18 : c'est mieux comme ça (joue avec le nombre de px pour augmenter ou reduire l'espace entre les champs) 

ch1.setAttribute('type','text');
ch1.setAttribute('name','ch1'+c2.length);
ch1.setAttribute('readonly','readonly'); 
ch1.setAttribute('value', 'etiquette'+c2.length/2);
ch1.setAttribute('style','border:none; margin-top:10px;');

   
Répondre à alexdelareunion

3

 Lazarey, le 16 mai 2008 à 17:30:14

Que dire à part un énorme et un grand merci !!!!!!
Ca fonctionne nikel.!!!!!
Je vais me débrouiller pour faire la mise en forme.

Merci encore et à bientôt.

   
Répondre à Lazarey
Posez votre question Répondre
Ils ont besoin de votre aide