JQuery and ASP:RadioButton and .change() not working

Question

Found a similar question but it didn't solve my issue. I am trying to call a .change() event to display some hidden text when a user selects a RadioButton.

I tried this in JSFiddle and it works with normal forms but can't seem to get it to work with my ASP.NET form.

Original code -- http://jsfiddle.net/pJgyu/8226/ (when you click the Yes or No it displays or hides the paragraph).

My ASP code --

<asp:RadioButton ID="RadioButton1" runat="server" Text="Yes" GroupName="RadioGroup1" />    <br /></p>
<asp:RadioButton ID="RadioButton2" runat="server" Text="No" GroupName="RadioGroup1" />      

<p style="display: none">testing 1...2...3...</p>

When I fire off my JQuery code -

$("input:radio").change(function ()
  $("p").toggle("slow");
});

and change the "input:radio" to #RadioButton1 (or 2) or even <%=RadioButton1%> nothing happens.

So, what am I doing wrong? I'm a JQuery overall ASP.NET noob. :)

Thanks for any direction/pointers/tips.

Can you post the HTML that your asp.net application renders, I am wondering if the ID that asp.net renders is what you are expecting. — Swaff, Mar 29 '11 at 13:34
Can you post more of your asp and jquery code? In your asp.net code there is an extra closing `
` after the first radio button, is that intended? — e11s, Mar 29 '11 at 13:44
Hey moose-in-the-jungle - yeah, I removed that on my application. Had some extra stuff hanging around. Did get things answered by Mark (see below). — Valien, Mar 29 '11 at 13:47

score 4 · Accepted Answer · answered Mar 29 '11 at 13:34

4

Try placing everything inside the document ready

$(function() {
  $( "#accordion" ).accordion();
  $("input:radio").change(function () {
     $("p").toggle("slow");
   });
});

Your existing code on jsfiddle is working since you picked to have jsfiddle wrap everything in a $(window).load()

answered Mar 29 '11 at 13:34

Mark Coleman

40,542
9
81
101

Mark - brilliant! That was it. Works like a charm now. Thanks so much. Can't believe it was something that simple. :) Guess I need to read more JQuery documentation. – Valien Mar 29 '11 at 13:46

score 1 · Answer 2 · answered Mar 29 '11 at 13:46

This code worked for me !. Tested :)

<asp:RadioButton ID="RadioButton1" runat="server" Text="Yes" GroupName="RadioGroup1" />        
<br/>
<asp:RadioButton ID="RadioButton2" runat="server" Text="No" GroupName="RadioGroup1" />      

<p style="display: none">testing 1...2...3...</p>  


<script type="text/javascript">
   $(document).ready(function () {
        $("input:radio").change( function (){
            $("p").toggle("slow");
        });
    });
</script>

score 0 · Answer 3 · answered Mar 29 '11 at 13:39

This may be to to with the ClientID value that asp.net actually assigns your controls when they are rendered.

$(function(){

    var radioButton1 = '<%= RadioButton1.ClientID %>';
    var radioButton2 = '<%= RadioButton2.ClientID %>';

    $(radioButton1).change(function ()
      $("p").toggle("slow");
    });

    $(radioButton2 ).change(function ()
      $("p").toggle("slow");
    });
});

score 0 · Answer 4 · answered Mar 29 '11 at 13:55

0

you can get the click event too, some times it is a good choice

$("input:radio").click(function(){
    //yout code here
});

answered Mar 29 '11 at 13:55

Flavio CF Oliveira

5,235
13
40
63

JQuery and ASP:RadioButton and .change() not working

4 Answers4