Valeur différente de button radio sur evenement onchange Jquery

Version imprimable

Bonjour,

J'utilise depuis peu jquery qui est vraiment excellent, cependant là je rencontre un problème étrange, j'ai simplifié mon code pour le centré uniquement sur l'erreur. J'ai donc le code suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <html> <head> <script type="text/javascript" src="/js/lib/jquery-1.3.2.js"></script> <script type="text/javascript" src="/js/lib/ui.core.js"></script> <script type="text/javascript"> $(function() { $("input[name='pur_has_paylater']").change( function() { alert($("input[name='pur_has_paylater'][checked]").val()); }); }); </script> </head> <body> <input type="radio" name="pur_has_paylater" value="N" checked="checked"/> test N <input type="radio" name="pur_has_paylater" value="Y"/> test Y </body> </html>
Mon problème est donc que la valeur qui s'affiche n'est pas la même sous IE7 et Firefox, sous IE7 il me retourne la valeur avant le click et sous Firefox il me retourne la valeur après click. :(
J'avoue ne pas savoir d'ou ça peut venir.
Si quelqu'un a une idée je vous remercie d'avance :)

04/05/2009, 16h20
hikosei

Personne n'aurais une petite idée ???

Bonsoir.

C'est un vrai problème : IE ne rend pas compte du premier change().

Après avoir essayé différentes bidouilles, sans succès, je ne vois qu'une possibilité : ne pas utiliser change() mais click() voir exemple ci-joint.

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid red;
            font-size:0.8em;
        }
        div#conteneur p {
            margin-bottom:12px;
        }
        div#affiche {
            margin:12px;
            border:1px solid red;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var checkedValue = "N";
 
            $("#choix").click(function(){
                var test = $("#choix input:checked").val();
 
                if (test != checkedValue) {
                    checkedValue = test;
                    $("#affiche").append("<p>checked = " + checkedValue + ".</p>");
                }
            });
        });
    </script>
 
</head>
<body>
    <div id="conteneur">
        <fieldset id="choix">
            <p><input type="radio" name="pur_has_paylater" value="N" checked="checked" /> test N</p>
            <p><input type="radio" name="pur_has_paylater" value="Y" /> test Y</p>
        </fieldset>
        <div id="affiche"></div>
    </div>
</body>
</html>

Ce matin j'ai fouillé un peu et le bug est confirmé !

Citation:

http://norman.walsh.name/2009/03/24/jQueryIE

http://webbugtrack.blogspot.com/2007...-properly.html

"The onchange event can be attached (inline or as an event handler) to any form element. It fires whenever the value of the form field changes. Unfortunately, the behavior is a bit strange in IE, in that for a checkbox, or a radio button field, the event doesn't fire when it is supposed to (right when you click the option you want to choose), but instead it only fires, when you click elsewhere on the page/form, or if you explicitly call blur(); on the field."
Posted by Bryan on 24 Mar 2009 @ 10:25p UTC

J'avais déjà pensé à la bidouille :

Code:

$(this).blur();

, mais sans résultat !

06/05/2009, 01h23
hikosei

hehe je vois que les grand esprits ce rencontre , désolé de pas avoir répondu plus tot mais quelque problème avec le net au boulot.
J'ai décidé hier aussi de partir sur l'evenement click() ne trouvant aucun autre moyen de resoudre le problème.
Encore une différence entre les navigateurs :(

Merci pour ton aide en tout cas ! :king: