High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

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) Voir
[Internet] Saisie semi-automatique Voir
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...
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...
Javascript - Les chaînes de caractères VoirQu'est-ce qu'une chaîne de caractère Une chaîne de caractère est, comme son nom l'indique, une suite de caractères. On la représente par la suite de caractères encadrée par des guillemets simples (') ou doubles ("), sachant que les deux types de...
Tableur - La saisie de données VoirSAISIE DE DONNEES LITTERALES Vous êtes prêt à entrer des données dans votre feuille de calcul. Nous vous déconseillons toutefois de le faire avant d’avoir réfléchi soigneusement à ce que vous voulez obtenir : de façon générale, mieux vaut bâtir sur...
Posez votre question Répondre

1

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

<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