Comment récupérer la valeur saisie dans un textarea ?

**CinePhil** · 05/03/2012, 00h24

Bonjour,

Presque tout est dans le titre !

J'ai essayé ceci :

Code :

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

var commentaire = $("#msg_addAsFriend").val();

J'ai essayé plus classiquement avec ceci :

Code :

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

var commentaire = document.getElementById("msg_addAsFriend").value;

Mais un alert(commentaire) ne donne qu'une boîte blanche dans le premier cas et un bel "undefined" dans le second.

Je précise que ce textarea est dans le code HTML d'une fancybox mais bien sûr, le code javascript est exécuté après clic du bouton de la fancybox.

Une idée de la cause et de la solution ?

**danielhagnoul** · 05/03/2012, 04h24

Bonsoir

C'est bien la méthode val() qu'il convient d'utiliser : http://api.jquery.com/val/

Je précise que ce textarea est dans le code HTML d'une fancybox mais bien sûr, le code javascript est exécuté après clic du bouton de la fancybox.

Une génération dynamique ? Voir la méthode delegate() ou on() avec 1.7 et + : http://api.jquery.com/delegate/

**CinePhil** · 05/03/2012, 22h12

Envoyé par danielhagnoul

Bonsoir

C'est bien la méthode val() qu'il convient d'utiliser : http://api.jquery.com/val/

Sauf que ça ne fonctionne désespérément pas !

Une génération dynamique ? Voir la méthode delegate() ou on() avec 1.7 et + : http://api.jquery.com/delegate/

Euh... qu'appelles-tu génération dynamique ?

Le contenu de la Fancybox est défini en div cachée de la page HTML. Elle contient un bouton qui lance la fonction dans laquelle se trouve la (tentative de) récupération du contenu de la textarea située elle aussi dans la fancybox.

Euh... ça sert à quoi ce delegate ? Je ne suis qu'un grand débutant en Javascript et encore plus en JQuery et autres fantaisies Ajax.

**loic20h28** · 07/03/2012, 15h41

Bonjour,

Pourrais-tu nous fournir le HTML concerné par ce code javascript, s'il te plait ?

Cordialement.

**CinePhil** · 07/03/2012, 19h23

Voilà le code...

Dans la vue, la partie contenant le lien qui ouvre la fancybox (afficheShareIt) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<?php 
        if($info['id_crea'] != $_SESSION['coords']['id'])
        {
                // Si le créateur du message n'est pas le membre connecté
?>
                                                &nbsp;&nbsp;
                                                <a id="<?php echo $id_msg; ?>" 
                                                        href="javascript:afficheShareIt(<?php echo $id_msg; ?>, '<?php echo $info['message']; ?>');" 
							class="souligneSurvol"
						>
							<?php echo $trad_share; ?>							
						</a>

Le javascript afficheShareIt :

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
/**
 * afficheShareIt
 * Affiche la popup Share It
 * @param idMessage
 * @return
 */
function afficheShareIt(idMessage, message)
{
	$("#shareItMessage").text(message);
	$.fancybox(
			document.getElementById("popupShareIt").innerHTML,
			{
				'autoDimensions'	: false,
				'width'         	: 'auto',
				'height'        	: 'auto',
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
			}
		);
}

Dans la vue le code du contenu de la fancybox :

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
<div id="popupShareIt"  class="popupFancyBox">
	<span class="popupTitle"><?php echo $trad_share; ?></span>
	<div class="popupForm">
		<form action="" method="post">
			<div id="shareItPhoto">
				<img src="images/profil/<?php echo (($_SESSION['coords']['photo']) != ''?$_SESSION['coords']['photo']:'no-image.png'); ?>" width="60px"; height="60px" />";
			</div>
			<div id="shareItYourMessageDiv">
				<?php echo $trad_your_message; ?> :<br />
				<textarea id="msg_addAsFriend" name="msg_addAsFriend"></textarea>
			</div>
			<div class="popupMessageDiv">
				<div id="shareItMessage"></div>
				<input id="shareItButton" type="button" onclick="javascript:shareMessage(<?php echo $id_msg.', '.$_SESSION['coords']["id"]; ?>);" />;
				<div id="shareItCadenas" class="afficher_popup"  onclick="afficherPopup('shareItCadenas');">
					<input id="chp_sharewith" name="chp_sharewith" type="hidden" value="<?php echo (($_SESSION['coords']['sharewith'] == "")?"everyone":$_SESSION['coords']['sharewith']); ?>" />
				</div>
			</div>
		</form>
	</div><!-- Fin shareItForm -->
</div><!-- Fin popupShareIt -->

La fonction Javascript shareMessage :

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
/**
 * shareMessage
 * Enregistre le partage d'un message
 * @param integer idmsg : identifiant du message
 * @returns nothing
 */
function shareMessage(idmsg, idj)
{
	var commentaire = $("#shareItMessage").val();
	alert("contenu du textarea : "+commentaire);
	$.ajax(
		{
			url: "ajax/addcomment.php",
			global: false,
			type: "POST",
			data: ({idMessage : idmsg, idjoueur : idj, msg_commentaire : commentaire}),
			dataType: "html",
			async:false,
			success: function(retour)
			{
				alert('commentaire ajouté');
 
			}
		}
	);
}

Merci d'essayer de m'aider.

**kohsaka** · 08/03/2012, 11h57

Code :

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

1
2
 
   <textarea id="msg_addAsFriend" name="msg_addAsFriend"></textarea

Code :

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

<div id="shareItMessage"></div>

Code :

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

1
2
3
 
    var commentaire = $("#shareItMessage").val();
    alert("contenu du textarea : "+commentaire);

Tu ne récupères pas le bon élément.

ps : Il serait mieux de poster le code HTML généré dépourvu du code PHP

**CinePhil** · 08/03/2012, 13h36

Il y avait effectivement une coquille mais même en la corrigeant, je n'affiche toujours pas le contenu saisi dans la textarea dans la boîte d'alerte.

Voici le code HTML produit pour le contenu de la fancybox :

Code html :

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
<div id="popupShareIt"  class="popupFancyBox">
	<span class="popupTitle">Partager</span>
	<div class="popupForm">
		<form action="" method="post">
 
			<div id="shareItPhoto">
				<img src="images/profil/d41d8cd98f00b204e9800998ecf8427e-16.jpg" width="60px"; height="60px" />";
			</div>
			<div id="shareItYourMessageDiv">
				Votre message :<br />
				<textarea id="msg_addAsFriend" name="msg_addAsFriend"></textarea>
			</div>
			<div class="popupMessageDiv">
 
				<div id="shareItMessage"></div>
				<input id="shareItButton" type="button" onclick="javascript:shareMessage(5, 16);" />;
				<div id="shareItCadenas" class="afficher_popup"  onclick="afficherPopup('shareItCadenas');">
					<input id="chp_sharewith" name="chp_sharewith" type="hidden" value="everyone" />
				</div>
			</div>
		</form>
	</div><!-- Fin shareItForm -->
</div><!-- Fin popupShareIt -->

**tigunn** · 09/03/2012, 11h18

Code :

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

1
2
3
4
5
6
7
8
var $form = jQuery('#form_blabla'),
   			id = $form.find('input[name="id"]').val(),
   			titre = $form.find('input[id="titre"]').val(),
   			desc = $form.find('textarea[id="description"]').val(),
   			url = $form.attr('action'),
   			method = $form.attr('method');

jQuery.post(url, {fid: id, ftitre: titre, fdesc: desc, fpermanent: protege, fide_user: publique});

A Adapter

**CinePhil** · 09/03/2012, 11h26

Euh... il est censé servir à quoi ce code ?
Fabriquer la boîte de dialogue ou récupérer ses valeurs ?

Je le mets où dans mon code actuel ?

**tigunn** · 09/03/2012, 11h35

Si tu veux récupérer la valeur de ta textarea "msg_addAsFriend", tu peux essayer

Code :

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

jQuery('#class de ton textarea || document').find('textarea[id="msg_addAsFriend"]').val()

Placé le tout dans

Code :

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

jQuery(document).ready(function(){....});

**CinePhil** · 11/03/2012, 00h53

Que veux-tu dire par class de ton textarea || document ?

La classe CSS ? Il n'y en a pas pour la textarea.
Et c'est quoi la double barre verticale et document ?

Et jQuery(document).ready(function(){....});, ça ne va pas s'exécuter dès chargement de la page ?

**schwarzy2** · 11/03/2012, 09h42

tu as essayé la fonction .html() ou lieu de .val()?

**CinePhil** · 11/03/2012, 13h50

Pas de changement avec .html !

**franck31** · 13/03/2012, 17h17

Déjà dans ton jquery tu veux récupérer:

Code :

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

var commentaire = $("#shareItMessage").val();

alors que l'id de ton textarea est

Code :

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

id="msg_addAsFriend"

**CinePhil** · 14/03/2012, 00h14

Merci Franck mais ça m'a déjà été signalé un peu plus haut.

En message privé, tu m'as suggéré ceci :

Code :

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

1
2
3
4
$('input#submit').click(function() {
var texte = $('#msg_addAsFriend').val();
alert(texte);
})

Je l'ai essayé brut puis en corrigeant le nom du composant, je suis arrivé à ceci :

Code :

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

1
2
3
4
5
6
7
8
9
function shareMessage(idmsg, idj)
{
	$('#shareItButton').click(function() {
		var commentaire = $('#msg_addAsFriend').val();
		alert("contenu du textarea : "+commentaire);
		}) 
	//var commentaire = document.getElementById("msg_addAsFriend").value;
	//var commentaire = $("#msg_addAsFriend").val();
	//alert("contenu du textarea : "+commentaire);

Ce coup-ci, je n'ai même pas la boîte d'alert !

Je suis ouvert à toute solution me permettant d'avoir une boîte de dialogue variable et récupérer la valeur de son textarea après clic sur le bouton pour l'injecter dans un programme Ajax.

**danielhagnoul** · 15/03/2012, 01h31

Bonsoir

Par génération dynamique, je pensais à la génération du textarea par la FancyBox et que vous aviez besoin d'y avoir accès dans un gestionnaire d'événement.

Que donne : var commentaire = $( "#popupShareIt" ).find( "textarea" ).val() ?

**CinePhil** · 19/03/2012, 00h20

Rien de mieux.

Code :

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

1
2
3
4
function shareMessage(idmsg, idj)
{
	var commentaire = $( "#popupShareIt" ).find( "textarea" ).val();
	alert("contenu du textarea : "+commentaire);

Pas de commentaire saisi affiché.

EDIT :
Je viens de remarquer que la div définie par le programme PHP reste en display:none dans Firebug et que cette div est en fait encapsulée dans la div créée par la fancybox ayant pour id "fancybox-content".
Du coup, j'ai adapté ton code comme ceci :

Code :

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

var commentaire = $( "#fancybox-content" ).find( "textarea" ).val();

Et ça fonctionne ; j'ai bien le texte saisi dans la textarea de la fancybox qui s'affiche dans la boîte d'alert.

Merci pour ton aide Daniel.

Comment récupérer la valeur saisie dans un textarea ?

jQuery

Discussions similaires

Partager

Partager