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

Version imprimable

05/03/2012, 00h24
CinePhil

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

Bonjour,

Presque tout est dans le titre !

J'ai essayé ceci :

Code:

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

J'ai essayé plus classiquement avec ceci :

Code:

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 ?
05/03/2012, 04h24
danielhagnoul

Bonsoir

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

Citation:

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/
05/03/2012, 22h12
CinePhil

Citation:

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

Citation:

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. :oops:
07/03/2012, 15h41
loic20h28

Bonjour,

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

Cordialement.

Voilà le code...

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

Code:

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:

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:

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:

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.

Code:

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

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

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

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:

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

Code:

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 ;)

09/03/2012, 11h26
CinePhil

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 ?
09/03/2012, 11h35
tigunn

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

Code:

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

Placé le tout dans

Code:

jQuery(document).ready(function(){....});
11/03/2012, 00h53
CinePhil

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 ?
11/03/2012, 09h42
schwarzy2

.html

tu as essayé la fonction .html() ou lieu de .val()?
11/03/2012, 13h50
CinePhil

Pas de changement avec .html ! :cry:
13/03/2012, 17h17
franck31

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

Code:

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

alors que l'id de ton textarea est

Code:

id="msg_addAsFriend"

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

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

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:

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.

15/03/2012, 01h31
danielhagnoul

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() ?
19/03/2012, 00h20
CinePhil
Rien de mieux.
Code:

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

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:

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.