asked on

How do I determine which radio button is selected in a radiobutton list using javascript

Hi,

I'm quite new to javascript so I'm having alot of problems figuring this out. On my web form I am trying to figure out how to use Javascript to determine which radio button is selected from a radio button list. Once I know which radio list item is selected, I then want to display various panels based on the selection.

Please see attached code. I would like to have a javascript solution not jquery.

Thanks

var selectedButton = getSelectedRadioButton("TypeSelection")

var getSelectedRadioButton = function (controlName) {
    for (var i = 0; i <= controlName.lenght; i++)
        if (controlName[i].checked) {
            return controlName[i];
        }
        else
            return "";
}

Open in new window

leakim971

use (replace your current code by) :

<script type="text/javascript" language="javascript">
window.onload = function() {
      var rbs = document.getElementsByName("<%= RadioButtonList1.ClientID %>").getElementsByTagName("input");
      for(var i=0;i<rbs.length;i++) {
          if( rbs[i].type == "radio" ) {
              rbs[i].onclick = function() {
                  var idPanel = this.value; // the value of the radio button is the id of the panel to hide
                  document.getElementById(idPanel).style.display = "block";
              }
          }
      }
}
</script>

Open in new window

obb-taurus

ASKER

I tried your code and get the following error.
Object doesn't support property or method 'getElementsByTagName'

I should have mentioned that the radio button list is in a content page based on a master page and the script is located in a external file. I have also registered the external file from the code behind as follows:

Page.ClientScript.RegisterClientScriptInclude("clearform", ResolveUrl(@"Scripts\JSScript.js"));
btnClear.Attributes.Add("onclick", "return clearInvoiceItemControls();");

I have attached to a button on the form for testing. I will be using this javascript function for clearing the form as well once I get this part figured out.

Not sure how much of a difference the above will make in your code sample.

Thanks

leakim971

RadioButtonList1 is the ID of your radiobutton list else replace it with your own ID

obb-taurus

ASKER

When I tried your code the first time I altered the code to match my name so in my case it would be:
transactionTypeSelection.ClientID and this generated the error.

leakim971

my bad, we need to add [0] :

var rbs = document.getElementsByName("<%= transactionTypeSelection.ClientID %>")[0].getElementsByTagName("input");

leakim971

Correction :
var rbs = document.getElementById("<%= transactionTypeSelection.ClientID %>").getElementsByTagName("input");

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

ASKER

Thanks so much for the awesome help.