Ajout d'un champs

loubna-ben Messages postés 4 Date d'inscription   Statut Membre Dernière intervention   -  
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   -
bonsoir
s'il vous plait j'a un grand problème et je vous en prie s'il y a qlq1 pourrai m'aider car je l'ai vraiment besoin
j'ai besoin d'ajouter des champs dynamiquement c à d lorsque je veux ajouter 4 champs de texte dans un formulaire qui contient que un input et button add d'apres le nombre que j'ai poser dans ce champs automatiquement j'aurai 4 champs je c po comment faire est ce que qlq1 pourrai m'aider slvp slvp

1 réponse

jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,


lorsque je veux ajouter 4 champs de texte dans un formulaire qui contient que un input et button add d'apres le nombre que j'ai poser dans ce champs automatiquement j'aurai 4 champs

Tu veux le faire dynamiquement sans recharger la page ou après avoir "submit" le formulaire ?
Si c'est "sans recharger la page" ... alors c'est en JAVASCRIPT qu'il faut le faire.....

Par exemple :
<html>
 <head>
  <title>TEST</title>
 </head>
<body>

  <div id="zone_nb">
   <label>Nombre d'input à ajouter : </label><input  id='nbInputs' type="text" value="">
   <input type="button" value="valider" onclick="addInputs();">
  </div>
 
  <form method="post" name="monForm" action="">
   <div id="zone_new_input">
     <!-- Zone où sera créée les INPUT -->
   </div>
  </form>

<script type="text/javascript">

function addInputs(){
  var nbInputsToAdd = document.getElementById('nbInputs').value;
  var zone_new_input = document.getElementById('zone_new_input');

  //Boucle sur le nombre d'input à créer
  for(var i=1;i<=parseInt(nbInputsToAdd);i++){
      //création de l'input
       var newinput = document.createElement('input');
       newinput.id = 'inp_'+i;
       newinput.setAttribute('name','inp_'+i);
    //Ajout de l'input
    zone_new_input.appendChild(newinput);
  
  }
 
}

</script>


</body>
</html> 

0