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

iamlouky
Javascript

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.

Voila mon code, lorsqu'on clique sur le bouton Label cela affiche un input. Maintenant j'aimerais que lorsqu'on tape un texte dans cet input que cela s'affiche dans le span. 

<span class="copy"></span> 
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; 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%;
  }
</style>
</head>
<body>
  <div id="gauche">
<span class="copy"></span>
  </div>
  <div id="droite">
    Formulaire<br><br>
    <button class="button1">Label</button>
    <button>Zone de texte</button>
    <button>Bouton</button>
    <p class="label1">Texte du label <input type="text" name="nom"><button>OK</button></p>
  </div>

  <script src="jquery.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
    $(".button1").click(function(){
        $(".label1").fadeIn();
    });
});

    $(function() {
        $('.label1').hide();
      }); 
  </script>
</body>
</html>

2 réponses

Lardio
Réponse acceptée

Salut,
j'ai reduit les composants du formulaire, car je n'ai pas saisi l'utilite de tous ces boutons. Jai donc juste garde l'input + un bouton.

HTML :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="test.js"></script>
 <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%;
  }
</style>
</head>
<body>

<div id="gauche">
    <span class="copy"></span>
</div>

<div id="droite">
    <h3>Formulaire</h3><br><br>
    <label for="textSaisi">Texte :</label>
    <input type="text" name="textSaisi" id="textSaisi"> 
    <button id="Envoi">OK</button>
</div>

</body>
</html>

JS avec JQuery :

$(document).ready(function(){
    demande();
});

function demande(){
    $('#Envoi').click(function(){
        var recuperation = $('#textSaisi').val();
        $('#textSaisi').fadeOut(); 
        $('.copy').text(recuperation);
    })
}

Hesite pas a donner un retour, et me dire si ca correspond pas a te demande ;)
Cdlt

iamlouky
Auteur

Merci à toi Sylvain Lardiere, le code a parfaitement marché, c'est bien ce que je cherchais.