Javascript ajouter des champs de saisie.

Fermé

Lazarey Messages postés 3239 Date d'inscription vendredi 3 novembre 2006 Statut Membre Dernière intervention 21 mai 2012 - 16 mai 2008 à 16:26
kwala - 5 juin 2012 à 10:32

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 :
https://www.developpez.net/forums/d252724/webmasters-developpement-web/general-conception-web/contribuez/src-ajouter-supprimer-champ-texte/

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

A voir également:

Javascript ajouter des champs de saisie.
Saisie gestuelle iphone - Guide
Telecharger javascript - Télécharger - Langages
Ajouter signature word - Guide
Saisie vocale sms - Guide
Ajouter un compte gmail - Guide

4 réponses

Réponse 1 / 4

alexdelareunion Messages postés 545 Date d'inscription dimanche 18 mars 2007 Statut Membre Dernière intervention 9 octobre 2023 142
16 mai 2008 à 17:15

<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éponse 2 / 4

alexdelareunion Messages postés 545 Date d'inscription dimanche 18 mars 2007 Statut Membre Dernière intervention 9 octobre 2023 142
16 mai 2008 à 17:26

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éponse 3 / 4

Lazarey Messages postés 3239 Date d'inscription vendredi 3 novembre 2006 Statut Membre Dernière intervention 21 mai 2012 745
16 mai 2008 à 17:30

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éponse 4 / 4

kwala
5 juin 2012 à 10:32

Des fois que certains rencontrent ce genre de problème :
http://archive.plugins.jquery.com/project/addInputArea

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

Comment savoir comment on nous a ajouté sur Snap