Récupérer le contenu d'un input text

Récupérer le contenu d'un input text - Javascript/Node.js - Programmation

Marsh Posté le 31-03-2018 à 10:33:30    

Bonjour,
 
Je viens de débuter avec Jquery, j'aimerais que lorsque je tape quelque chose dans  l'input et que je clique sur OK, que le texte tapé s'affiche dans le span et que l'input disparaît automatiquement.
 
Merci pour votre aide.
 

Code :
  1. <div id="gauche">
  2.    <span class="copy"></span>
  3. </div>
  4.  
  5. <div id="droite">
  6.    <p class="label1">Texte du label <input type="text" name="txt" id="txt"><button class="button2">OK</button></p>
  7. </div>

Reply

Marsh Posté le 31-03-2018 à 10:33:30   

Reply

Marsh Posté le 31-03-2018 à 11:01:43    

Pas besoin de jquery pour faire un truc aussi simple mais au préalable, rajoute un id à ton span (ex : mySpan) , ça facilitera les choses :
var sTxt = document.getElementById('txt').value;
document.getElementById('mySpan').innerHTML = sTxt;
 
Edit : un conseil : avant d'apprendre une lib de haut niveau, apprends d'abord le langage lui-même. Ca te permettra de voir ce qu'apporte réellement jquery par rapport aux fonctions de base du javascript et t'en servir quand c'est vraiment nécessaire :o


Message édité par rufo le 31-03-2018 à 11:03:22

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 31-03-2018 à 12:10:31    

iamlouky a écrit :

Bonjour,
 
Je viens de débuter avec Jquery, j'aimerais que lorsque je tape quelque chose dans  l'input et que je clique sur OK, que le texte tapé s'affiche dans le span et que l'input disparaît automatiquement.
 
Merci pour votre aide.
 

Code :
  1. <div id="gauche">
  2.    <span class="copy"></span>
  3. </div>
  4.  
  5. <div id="droite">
  6.    <p class="label1">Texte du label <input type="text" name="txt" id="txt"><button class="button2">OK</button></p>
  7. </div>



 
Bonjour  
Voici le code qui vous permet d'afficher le contenu d'input  

Code :
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  2. <script type="text/javascript">
  3. $(function() {
  4.   $('#txt').on("input", function() {
  5.     $('#someDiv').text($(this).val());
  6.   });
  7. });
  8. </script>
  9. <div id="someDiv"></div>
  10.     <div id="gauche">
  11.        <span class="copy"></span>
  12.     </div>
  13.    
  14.     <div id="droite">
  15.        <p class="label1">Texte du label <input type="text" name="txt" id="txt"><button class="button2">OK</button></p>
  16.     </div>
  17. <div id="someDiv"></div>


---------------
Comment regarder la TV sans le câble ?  https://how-to.watch/fr/tv-sans-cable/
Reply

Marsh Posté le 31-03-2018 à 12:29:15    

pjulienne a écrit :


 
Bonjour  
Voici le code qui vous permet d'afficher le contenu d'input  

Code :
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  2. <script type="text/javascript">
  3. $(function() {
  4.   $('#txt').on("input", function() {
  5.     $('#someDiv').text($(this).val());
  6.   });
  7. });
  8. </script>
  9. <div id="someDiv"></div>
  10.     <div id="gauche">
  11.        <span class="copy"></span>
  12.     </div>
  13.    
  14.     <div id="droite">
  15.        <p class="label1">Texte du label <input type="text" name="txt" id="txt"><button class="button2">OK</button></p>
  16.     </div>
  17. <div id="someDiv"></div>



 
 
Merci pour votre réponse. Le code marche correctement mais ce n'est pas exactement ce que je veux. J'aimerais que lorsqu'on tape le texte dans l'input que ça soit validé d'abord (cliqué sur le bouton OK) avant que cela ne soit affiché dans le <div id="someDiv"></div>.

Reply

Marsh Posté le 31-03-2018 à 13:34:00    

Tu appelles la fonction sur l'événement onclick du bouton.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed