Création d'un input avec un ID dynamique (aide) par ericwebdesigner - page 1

Bonjour Tout le monde

Je suis actuellement le cours "Simplifiez vos développements JavaScript avec jQuery" et lors du 1er TP on doit créer un générateur de formulaire. Donc j'ai tout créé toutes les options mais il y a une consigne qui est de créer un "input" avec un ID que l'utilisateur rentre.
Je n'arrive pas à attribuer l'ID à "l'input" que je cré, qui pourrais m'aider non pas me donner la solution mais une piste de réflexion svp car je galère de ouf.

Merci d'avance

Voici mon code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      body {
        margin: 0;
      }
      #gauche {
        float: left;
        width: 70%;
        height: 1000px;
        background-color: #EFECCA;
      }
      #droite {
        background-color: #CEFFF8;
        height: 1000px;
        padding : 10px;
        padding-left: 71%;
      }
      /*.hide{display: none}*/
      .zone, input{border-radius: 5px;}
      .valid{margin: 0 20px;}
      .contain{
        width: 80%;
        margin: 0 auto;
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <!-- Partie gauche -->
    <div id="gauche">
      <div class="contain">
        <h1>Générateur de formulaire</h1>
      </div>
    </div>
    <!-- Fin partie gauche -->

    <!-- Partie droite -->
    <div id="droite">
      Utilisez ces boutons pour créer votre formulaire<br><br>
      <button class="label">Label</button>
      <button class="texte">Zone de texte</button>
      <button class="bouton">Bouton</button>
      
      <hr style="margin:50px 0;">

      <!-- Zones du formulaire cachés -->
      <span id="label2" class="label2 hide">Texte du label <input class="zone1 zone"></input><button class="valid1 valid">OK</button></span>
      <span id="texte2" class="texte2 hide">id de la zone de texte <input class="zone2 zone"></input><button class="valid2 valid">OK</button></span>
      <span id="bouton2" class="bouton2 hide">Texte du bouton <input class="zone3 zone"></input><button class="valid3 valid">OK</button></span>
    </div>
    <!-- Fin partie droite -->


    <!-- JS -->
    <script src="js/jquery-3.2.1.js"></script>
    <script>
      $(function() {
        // Dissimulation des zones du formulaire
        $('.hide').hide();

        // Montrer la zone concernée au clic et dissimuler les autres
        $('.label').on('click', function(){
          $('.label2').show();
          $('.bouton2').hide();
          $('.texte2').hide();
        });
        $('.texte').on('click', function(){
          $('.texte2').show();
          $('.bouton2').hide();
          $('.label2').hide();
        });
        $('.bouton').on('click', function(){
          $('.bouton2').show();
          $('.label2').hide();
          $('.texte2').hide();
        });

        $('.valid1').on('click', function(){
          $('.contain').append(($('.zone1').val()));
        });
        $('.valid2').on('click', function(){
          var value = $('zone2').val();
          $('.contain').append('<input>'());
          // $('input').attr('id', value);
        });
        $('.valid3').on('click', function(){
          $('.contain').append('<button>' + ($('.zone3').val()) + '</button><br><br>');
        });
        
      });
    </script>
  </body>
</html>

Salut, utilise ctrl+i pour ouvrir la console sous chrome / firefox

essaie d'ajouter un input de type zone de texte, et regarde ce qui s'affiche

<SPOILER>si tu veux débuguer par toi même, ne regarde pas ça

le problème vient de la ligne 86, tu appelles une fonction sur un string (probablement une ligne de code non terminée)

</SPOILER>

ensuite, tu essaie de modifier des ids sur un sélecteur beaucoup trop peu spécifique : $('input') désigne TOUT tes <input>; il faut donc que tu modifies ta node d'une autre façon.

un indice : tu peux créer une node sans l'ajouter avec le code suivant :

var newNode = $("<input>",{class="",otherOption=""})

tu pourras ensuite ajouter la node de la même façon que tu ajoutes du html

Création d'un input avec un ID dynamique (aide)

Création d'un input avec un ID dynamique (aide)

Supprimer

Modérer

Signaler le message aux modérateurs