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

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 :

<div id="gauche">
<span class="copy"></span>
</div>
<div id="droite">
<p class="label1">Texte du label <input type="text" name="txt" id="txt"><button class="button2">OK</button></p>
</div>

Message cité 1 fois

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

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 :

<div id="gauche">
<span class="copy"></span>
</div>
<div id="droite">
<p class="label1">Texte du label <input type="text" name="txt" id="txt"><button class="button2">OK</button></p>
</div>

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

Code :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#txt').on("input", function() {
$('#someDiv').text($(this).val());
});
});
</script>
<div id="someDiv"></div>
<div id="gauche">
<span class="copy"></span>
</div>
<div id="droite">
<p class="label1">Texte du label <input type="text" name="txt" id="txt"><button class="button2">OK</button></p>
</div>
<div id="someDiv"></div>

Message cité 1 fois

---------------
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 :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#txt').on("input", function() {
$('#someDiv').text($(this).val());
});
});
</script>
<div id="someDiv"></div>
<div id="gauche">
<span class="copy"></span>
</div>
<div id="droite">
<p class="label1">Texte du label <input type="text" name="txt" id="txt"><button class="button2">OK</button></p>
</div>
<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

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

Sujets relatifs:

Leave a Replay