Affichage de variable

**lythande** · 22/09/2015, 09h21

Bonjour,

Je cherche de créer un formulaire dynamique avec jQuery, pour l'instant je n'ai pas inséré du php car je suis bloquée avec le jQuery (niveau débutante) et je viens tout juste de commencer.

Voici mon code html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="gauche">
		<span class="leLabel2"></span>
		<span class="zTexte2"></span>
		<span class="leBouton2"></span>
    </div>
 
    <div id="droite">
      Utilisez ces boutons pour créer votre formulaire<br><br>
      <button class="leLabel">Label</button>
      <button class="zTexte">Zone de texte</button>
      <button class="leBouton">Bouton</button>
	  <hr />
	  <span class="hello"></span>
    </div>

Et mon script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function() {
 
			  // Activez le bouton label
			  $('.leLabel').click(function(){
 
				  $('Texte du label : <br/> <input type="text" name="fname" class="fname"><br><input type="submit" value="Envoyer" class="envoyer">').appendTo('.hello');  
			  //Lorsque l'utilisateur clique sur le bouton OK, le texte saisi dans la zone de texte s'affiche dans la partie gauche de l'écran à l'intérieur du <span></span> :
			  $(".envoyer").click( function()
			  { 
				  var fname = $(".fname").val(); 
				  $(fname).appendTo('.leLabel2');
			  });						   
			  }); 
});

Avec un alert(fname); ça fonctionne parfaitement, mais si je mets $(fname).appendTo('.leLabel2'); il n'y a rien qui apparait, même pas de bugs signalés sur firebug.
Où est-ce que je me trompe ? C'est le sélecteur de la variable ?

Merciiiiiiiii

**Diablo_22** · 22/09/2015, 10h25

Bonjour,

il te manque déjà l'include de la bibliothèque JQuery dans ton code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Je te donne une base avec un exemple de comment créer un bouton dynamiquement, je pense qu'avec ce code tu pourras avancer:

index.html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <button id="insertAfterBtn">Bouton</button>
    <div class="myClass"></div>
    <div id="myId"></div>
  </body>
</html>

script.js:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
// Code goes here
$(document).ready(function()
{
  $("#insertAfterBtn").one("click", function(e)
  {
    var r = $('<input/>', { type: "button", id: "field", value: "Je suis un Bouton Dynamique" });
    $("body").append(r);
  });
});

**Jacques Beauregard** · 22/09/2015, 10h35

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var fname = $(".fname").val();
 $(".leLabel2")[0].innerHTML=fname;

Bien faire attention avec les classes : tu récupères une collection d'éléments ( car une classe n'est pas unique)

**lythande** · 22/09/2015, 12h45

Bonjour,

Merci à tous !
J'avais bien mis le lien pour la bibliothèque jquery, j'avais seulement oublié de l'écrire dans la discussion ..
Le problème c'est que je voulais mettre une variable à la place d'un sélecteur !
Donc, voici ce que j'ai mis à la place :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$(".envoyer").click(function()
			  { 
				 var fnam = $(".fname").val(); 
				 var fname = $('<span class="leLabel2">'+ fnam + '</span>');
				 $('#gauche').append(fname);
			  });

Thank you !

**danielhagnoul** · 22/09/2015, 19h20

Débutant d'accord ! Mais...

Les classes et la méthode append() sont utiles, mais l'objet jQuery possède de nombreuses méthodes.

FAQ jQuery : voir le lien dans ma signature

Dans le but de vous aider dans votre apprentissage, voici un exemple un peu plus complexe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.min.css">
  <style>
 
  </style>
</head>
<body>
 
  <div id="gauche">
    <span class="leLabel"></span>
    <span class="zTexte"></span>
    <span class="leBouton"></span>
  </div>
  <div id="droite">
    Utilisez ces boutons pour créer votre formulaire<br><br>
    <button class="leLabel">Label</button>
    <button class="zTexte">Zone de texte</button>
    <button class="leBouton">Bouton</button>
    <hr />
    <span id="hello"></span>
  </div>
 
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
    "use strict";
 
    $( function(){ // forme abrégée de $(document).ready( function( ){      
 
     $( "#droite > .leLabel" ).on( "click", function( event ){
       $( "#hello" ).html( '<form id="monForm">Texte du label :<br><input type="text" name="fname"><br><input type="submit" value="Envoyer"></form>' );
 
       $( "#monForm" ).on( "submit", function( event ){
        // empécher la soumission du formulaire
        event.preventDefault();
        event.stopPropagation();
 
        $( "#gauche > .leLabel" ).text( $( "input[name='fname']" ).val() );
 
        // contenu du formulaire pour AJAX
        var str = $( this ).serialize();
 
        // debug, console, touche F12
        console.log( event );
        console.log( event.target );
        console.log( str );
 
        // Transaction AJAX avec le serveur
        // votre code, par exemple :
        /*
        var jqXHR = $.get( "monFichier.php", str );
        
        setTimeout( function(){
          // Si l'objet différé existe dans l'état "attendre", 
          // alors exécute la méthode fail()
          
          if ( jqXHR && jqXHR.state() === "pending" ){
            jqXHR.abort();
          }
        }, 3000 ); // 3s
        
        jqXHR.done( function( data, textStatus, jqXHR ){
          // succès de la transaction, on doit traiter le contenu de data
          console.log( data, textStatus, jqXHR );
          
        });
        
        jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
          // échec de la transaction, gérer la catastrophe
          console.log( jqXHR, textStatus, errorThrown );
          
        });
        
        jqXHR.always( function( jqXHR, textStatus ){
          // la transaction est terminée
          // nettoyage
          // exécution d'un code dépendant
          console.log( jqXHR, textStatus );
          
        })
        */
 
        // FAQ jQuery : voir le lien dans ma signature
 
       });						   
     });
 
    });
 
    $( window ).load( function(){ // page web chargée
 
    });
  </script>
</body>
</html>

Affichage de variable

jQuery

Vue hybride

Discussions similaires

Partager

Partager