recuperer la valeur d'un input radio et afficher la valeur d'une variable

Version imprimable

05/06/2012, 17h01
artenis

recuperer la valeur d'un input radio et afficher la valeur d'une variable
Bonjour,

je n'arrive pas à récuperer ou afficher le texte/ la valeur d'une variable dans un champ texte (input), après avoir (je l'espère) récupérer la valeur du bouton radio sélectionné.

voici mon code:
Code:

1 2 3 4 5 6 $('#accept-modif-img').click(function(){ var simg = $('input:radio:checked').val(); $('#recup_img_gal').append(simg); });
j'ai essayé ceci:

Code:

$('#recup_img_gal').text(simg);

Code:

$('#recup_img_gal').html(simg);

aucun ne marche :cry:

comment dois m'y prendre , si j'ai bien compris la fonction: .text ne prend pas de variable en paramètre , n'est ce pas ?

par avance merci pour votre aide

Code:

1
2
3
4
5
$('#accept-modif-img').click(function(){
		var simg = $('input:radio:checked').val();
		$('#recup_img_gal').append($("<span/>").html(simg) );
 
});

05/06/2012, 17h26
artenis
j'ai essayé ce que tu m'as donné, mais ne marche pas , mais je viens de penser que comme je veux recuperer la valeur dans un champ text, il suffisait de mettre:
Code:

1 2 3 $('#accept-modif-img').click(function(){ var simg = $('input:radio:checked').val(); $('#recup_img_gal').val(simg) ;
je recupere bien qqchose, seulement ce texte ne correspond absolument pas aux noms des images contenu dans ma galerie .

: pubyes1 ???? 8O n'existe pas dans ma galerie,

Un bug ? encore une erreur de ma part ?

merci pour votre aide
05/06/2012, 20h31
SpaceFrog

On peut voir le html associé ?
les id #accept-modif-img, #recup_img_gal sont quels types de balises ?
les radios ont quel name ...

Oui bien sur si ça peut vous permettre de m'aider:

voici la partie qui va recevoir le le nom de l'image selectionnée dans la galerie :

Code:

1
2
3
4
5
<div id="search-img" >Modifier l'image</div>
            <?php include'manage-image.php'; ?>
            <input type="text" id="recup_img_gal" name="recup_img_gal" style="width:400px;"><br />
            <span style="color:red; font-size:11px; ">Cliquer sur " Publier" pour enregistrer la nouvelle image</span>
        </div>

voici la partie entière qui gère la galerie d'images dynamiquement et qui accepte l'iamge selectionnée:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
<div id="locus-img">
    <div style="height:40px; width:600px; background:#666; color:white; font-size:20px; font-weight:bold; text-align:center; padding-top:10px; position:fixed; 
    -moz-border-top-left-radius:5px; -moz-border-top-right-radius:5px;
    -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; 
    border-top-left-radius:5px;border-top-right-radius:5px;">
    Rechercher l'image à ajouter
    </div>
 
    <div style="padding:10px 10px 10px 10px; overflow:auto; margin-top:50px; width:578px; height:395px; border:2px solid white; background:white;">
		<?php
        $dos = "images/";
        $dir = opendir($dos);
        while($file = readdir($dir)){
 
            $allow_extension = array('jpg', 'png', 'gif');
            $extension = strtolower(substr($file,-3));
            if(in_array($extension,$allow_extension)){
                ?>
                <div id="s-search-img">
                <form id="choose_img">
                <input type="radio" name="img_gal" value="<?php echo $file; ?>"  />
                <img src="images/<?php  echo $file; ?>" width="130" height="80"/>
                </form>
                <div id="s-search-img-name"><?php  echo substr($file,0,23); ?></div>
                </div>
                <?php
 
            }
        }
        ?>
    </div>
 
    <div id="modif-img">
 
        <div id="fermer-modif-img">Annuler / Fermer</div>
        <div id="accept-modif-img">Ouvrir / Accepter</div>
 
    </div>
</div>

et la partie javascript (bouton accepter l'image)

Code:

1
2
3
4
5
6
7
$('#accept-modif-img').click(function(){
		var simg = $('input:radio:checked').val();
		$('#recup_img_gal').val(simg) ;
		$('#locus-img').fadeOut(600);
		$('body').css({overflow:'auto'});
		$('#interupt').hide(); 
	});

06/06/2012, 14h22
SpaceFrog

je parlais du html généré ...

je vois des while avec des id dedans ...

il y a des id dupliqués sur la page ?

OK ,

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 <div id="locus-img">
 
    <div style="height:40px; width:600px; background:#666; color:white; font-size:20px; font-weight:bold; text-align:center; padding-top:10px; position:fixed; 

    -moz-border-top-left-radius:5px; -moz-border-top-right-radius:5px;

    -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; 

    border-top-left-radius:5px;border-top-right-radius:5px;">
 
    Rechercher l'image à ajouter
 
    </div>
 
 
 
    <div style="padding:10px 10px 10px 10px; overflow:auto; margin-top:50px; width:578px; height:395px; border:2px solid white; background:white;">
 
		                <div id="s-search-img">
 
                <form id="choose_img">
 
                <input type="radio" name="img_gal" value="antiage-media.png"  />
 
                <img src="images/antiage-media.png" width="130" height="80"/>
 
                </form>
 
                <div id="s-search-img-name">antiage-media.png</div>
 
                </div>
 
                                <div id="s-search-img">
 
                <form id="choose_img">
 
                <input type="radio" name="img_gal" value="enregistrer.png"  />
 
                <img src="images/enregistrer.png" width="130" height="80"/>
 
                </form>
 
                <div id="s-search-img-name">enregistrer.png</div>
 
                </div>

et :

Code:

1
2
3
<input type="text" id="recup_img_gal" name="recup_img_gal" style="width:400px;"><br />
 
            <span style="color:red; font-size:11px; ">Cliquer sur " Publier" pour enregistrer la nouvelle image</span>

je ne vois pas quoi donner d'autre ?

est-ce normal que l'on ne voit pas le texte d'un champ input (dans le code source de la page ?

oui effectivement il y a des id dupliqués, pourquoi , c'est pas bien ?

06/06/2012, 17h09
SpaceFrog

c'est pire que pas bien ...

un id = unique sur une page

Salut,
Si j'ai bien compris ton problème, à mon avis, ca devrait ressembler à ca :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
$(document).ready(function(){
$('#accept-modif-img').click(function(){
var val = "";
	$("input[name='img_gal']:checked").each(function() {
		val += $(this).val();
		$('#recup_img_gal').val(val);
	});
 
		/*$('#recup_img_gal').val(simg) ;
		$('#locus-img').fadeOut(600);
		$('body').css({overflow:'auto'});
		$('#interupt').hide(); */
	});
});

06/06/2012, 17h28
SpaceFrog

ben c'est surtout qu'avec 50 id pareils jquery il sait plus ou aller chercher

Oui, il faut donc que tu change :

Code:

1
2
 
<input type="text" id="recup_img_gal" name="recup_img_gal" style="width:400px;"><br />

par :

Code:

1
2
 
<input type="text" class="recup_img_gal" name="recup_img_gal"

et le code Jquery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
$(document).ready(function(){
$('#accept-modif-img').click(function(){
var val = "";
	$("input[name='img_gal']:checked").each(function() {
		val += $(this).val();
		$('.recup_img_gal').val(val);
	});
 
		/*$('.recup_img_gal').val(simg) ;
		$('#locus-img').fadeOut(600);
		$('body').css({overflow:'auto'});
		$('#interupt').hide(); */
	});
});

Un ID doit être unique sur ta page, sinon tu dois utiliser des CLASS.