I want the customer to be able to either buy phone line or credit. At first, both divs are hidden, and I want the related div to unhide (or show) when the customer chooses one purchase option.

Here is my code, but nothing happens when I check one of the two radio buttons. I don't want the page to postback, so I cannot set AutoPostBack="true"

Any help on what I am doing wrong is really appreciated =)

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#radLinePanel").click(chkPanelChanged);
        $("#radCreditPanel").click(chkPanelChanged);
     chkPanelChanged();
    });

    function chkPanelChanged() {
        if ($("#radLinePanel").is(':checked')) {
            $("#divLine").show("medium");
        }
        else {
            $("#divLine").hide("medium");
        }
        if ($("#radCreditPanel").is(':checked')) {
            $("#divCredit").show("medium");
        }
        else {
            $("#divCredit").hide("medium");
            }
    }
</script>


<div class="GreenPanel">
    <div class="GreenPanelHeader">   
        <asp:RadioButton ID="radLinePanel" runat="server" GroupName="ItemToBuy" Checked="false" Text="" ClientIDMode="Static"/>
        Buy New Phone Line
    </div>
    <div id="divLine" class="GreenPanelContent" runat="server">
        Blablabla
    </div>

    <div class="GreenPanelHeader">                                               
        <asp:RadioButton ID="radCreditPanel" runat="server" GroupName="ItemToBuy" Checked="false" Text="" AutoPostBack="false"/>
        Buy credit                         
    </div>
    <div id="divCredit" class="GreenPanelContent" runat="server">
        Blablabla
    </div>
</div>

I want the customer to be able to either buy phone line or credit. At first, both divs are hidden, and I want the related div to unhide (or show) when the customer chooses one purchase option.

Here is my code, but nothing happens when I check one of the two radio buttons. I don't want the page to postback, so I cannot set AutoPostBack="true"

Any help on what I am doing wrong is really appreciated =)

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#radLinePanel").click(chkPanelChanged);
        $("#radCreditPanel").click(chkPanelChanged);
     chkPanelChanged();
    });

    function chkPanelChanged() {
        if ($("#radLinePanel").is(':checked')) {
            $("#divLine").show("medium");
        }
        else {
            $("#divLine").hide("medium");
        }
        if ($("#radCreditPanel").is(':checked')) {
            $("#divCredit").show("medium");
        }
        else {
            $("#divCredit").hide("medium");
            }
    }
</script>


<div class="GreenPanel">
    <div class="GreenPanelHeader">   
        <asp:RadioButton ID="radLinePanel" runat="server" GroupName="ItemToBuy" Checked="false" Text="" ClientIDMode="Static"/>
        Buy New Phone Line
    </div>
    <div id="divLine" class="GreenPanelContent" runat="server">
        Blablabla
    </div>

    <div class="GreenPanelHeader">                                               
        <asp:RadioButton ID="radCreditPanel" runat="server" GroupName="ItemToBuy" Checked="false" Text="" AutoPostBack="false"/>
        Buy credit                         
    </div>
    <div id="divCredit" class="GreenPanelContent" runat="server">
        Blablabla
    </div>
</div>

• javascript
• jquery
• asp.net

• 1 Please show generated HTML, not template – Krzysztof Safjanowski Commented Jul 21, 2014 at 10:15
• why are u calling chkPanelChanged(); again in third line of document.ready – Kartikeya Khosla Commented Jul 21, 2014 at 10:15
• @KartikeyaKhosla I thought maybe to call that function on load any ways, I am not familiar with javascript and jquery at all :( – Yalda Commented Jul 21, 2014 at 10:18
• What browser are you using? Does it show any error's in the developer's console? – ZioN Commented Jul 21, 2014 at 10:41

2 Answers 2

Your syntax is wrong. You can try this:

$(document).ready(function () {
   $("#radLinePanel").click(function(){
      chkPanelChanged();
   });

   $("#radCreditPanel").click(function(){
      chkPanelChanged();
   });
});

Or

$(document).ready(function () {

   $("input[type='radio']").click(function(){
      chkPanelChanged();
   });

});

The chkPanelChanged also can be like this:

$(document).ready(function () {
    $("input[type='radio']").on("change", function(){        
        chkPanelChanged(this);
    });
});

function chkPanelChanged(obj) {
    if (obj.id == "radLinePanel") {
        $("#divLine").show("medium");
        $("#divCredit").hide("medium");
    }
    else if (obj.id == "radCreditPanel")
    {
        $("#divLine").hide("medium");
        $("#divCredit").show("medium");
    }
}

If you trying to use grouped radio buttons, Then consider this:

HTML

<div id="radio">
    <input type="radio" id="radio1" name="radio" value="1" /><label for="radio1">Choice 1</label>
    <input type="radio" id="radio2" name="radio" value="2" checked="checked" /><label for="radio2">Choice 2</label>
    <input type="radio" id="radio3" name="radio" value="3" /><label for="radio3">Choice 3</label>
</div>

Jquery

$("input[name='radio']").on("change", function () {
   alert(this.value);
});

$(document).ready(function () {
        $("#radLinePanel").click(chkPanelChanged);
        $("#radCreditPanel").click(chkPanelChanged);
     chkPanelChanged();
    });

should be change as

$(document).ready(function () {
        $("#radLinePanel").click(function () {       
         chkPanelChanged();
    });