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
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;'); -
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. -
Des fois que certains rencontrent ce genre de problème :
http://archive.plugins.jquery.com/project/addInputArea
