6

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>
4
  • 1
    Please show generated HTML, not template Jul 21, 2014 at 10:15
  • why are u calling chkPanelChanged(); again in third line of document.ready 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
    Jul 21, 2014 at 10:18
  • What browser are you using? Does it show any error's in the developer's console?
    – ZioN
    Jul 21, 2014 at 10:41

2 Answers 2

10

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);
});
2
  • Thanks for correcting, but even the new syntax works only when I set AutoPostBack="true" for my radLinePanel and radCreditPanel controls
    – Yalda
    Jul 21, 2014 at 10:55
  • I think I did something in codebehind which is messing the visibility of my panels. Thanks again.
    – Yalda
    Jul 21, 2014 at 11:07
1
$(document).ready(function () {
        $("#radLinePanel").click(chkPanelChanged);
        $("#radCreditPanel").click(chkPanelChanged);
     chkPanelChanged();
    });

should be change as

$(document).ready(function () {
        $("#radLinePanel").click(function () {       
         chkPanelChanged();
    });
1
  • Thanks, but still it only works when I set AutoPostBack="true" for my radLinePanel and radCreditPanel controls
    – Yalda
    Jul 21, 2014 at 10:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.