Javascript ajouter des champs de saisie.
Lazarey
Messages postés
3793
Statut
Membre
-
kwala -
kwala -
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 :
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.
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
- Saisie vocale whatsapp - Accueil - Messagerie instantanée
- Saisie vocale sms - Guide
- Ajouter liste déroulante excel - Guide
- Ajouter signature word - Guide
4 réponses
<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
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;');