Ajout d'un champs

loubna-ben Messages postés 4 Statut Membre -  
jordane45 Messages postés 30427 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

  1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 831
     
    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