Question

166

Call a javascript function on RadioButton click

rated 0 times [ 168] [ 2] / answers: 1 / hits: 33812 / 10 Years ago, mon, july 21, 2014, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

arthur

Add To Favorites

Follow

Total Points: 729

Total Questions: 107

Total Answers: 109

Location: China

Member since Mon, Aug 22, 2022

2 Years ago

arthur questions

1 Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) rollup vue package

Thu, Sep 2, 21, 00:00, 3 Years ago

1 Formik & Yup: How to validate if the provided date is eighteen years old?

Mon, Oct 19, 20, 00:00, 4 Years ago

1 Angular 9 how to use debouncetime for input change event (keyup)

Thu, Apr 30, 20, 00:00, 4 Years ago

1 Swiper and current page index

Wed, Feb 19, 20, 00:00, 4 Years ago

1 Google Maps API Billing not Enabled Error - Billing not open

Fri, Jan 10, 20, 00:00, 4 Years ago

View All

answered 10 Years ago kamryn · Accepted Answer

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);

});