Javascript ajouter des champs de saisie.
Lazarey
Messages postés
3255
Date d'inscription
Statut
Membre
Dernière intervention
-
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
- Liste deroulante excel avec saisie semi-automatique - Guide
- Ajouter un chromecast - Guide
- Ajouter signature word - Guide
- Saisie intuitive - 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;');
