Adding Javascript OnClick Events to ASP.NET RadioButtonList Controls

This free JavaScript article will show you how to add onclick events to the ASP.NET RadioButtonList controls quickly and easily.


Sampled by © JavaScriptBank.com

I've been fighting to add javascript code to the onclick event of ASP.NET RadioButtonList controls for the last hour, and given the frustration it caused me, I am writing the solution up for future reference. The real world code I am writing is far more complex than this example, but hopefully this illustrates enough to act as a primer, and to jog my own memory in future.

It's actually quite simple. For the example, I'm going to make a RadioButtonList make a Textbox dynamically appear and disappear.

The ASP.NET RadioButton List Control

Here's how the RadioButtonList might look...

<asp:RadioButtonList ID="rblFoo" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal">
  <asp:ListItem Text="Show" Value="show" />
  <asp:ListItem Text="Hide" Value="hide" />
</asp:RadioButtonList>
<asp:TextBox ID="tbFoo" runat="server"></asp:TextBox>

The Javascript Function

Here's a javascript function that we are going to attach to the onclick event of each radio button (you would typically put this in a javascript file, and reference it via a SCRIPT tag in your ASPX page)

function fooClick(option_value,tb_id){
  var textbox_object = document.getElementById(tb_id);
  if (option_value == 'show'){
    textbox_object.style.display = 'block';
  } else {
    textbox_object.style.display = 'none';
  }
}

Attaching the Javascript to the OnClick event of the ASP.NET RadioButtonList Options

In the OnLoad() event of your page, do the following;

foreach(ListItem li in rblFoo.Items){
  li.Attributes.Add("onclick","fooClick('" + li.Value + "','" + tbFoo.ClientID + "');");
}

The important point to realise is that ASP.NET Server controls typically get assigned their ID and Name dynamically at runtime. The last part of this solution solves that by attaching the javascript to the objects on the server side, where it knows the ClientID it has already generated for the control we want to interact with.

Language
Translate this page to English Translate this page to French Translate this page to Vietnamese

Recent articles
Vue.js developers: hire them, use them and get ahead of the competition
3 Reasons Why Java is so Popular
Migrate to Angular: why and how you should do it
The Possible Working Methods of Python Ideology
JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece
Learning How to Make Use of New Marketing Trends
5 Important Elements of an E-commerce Website
How To Create A Successful Prototype For Your PCB
WordPress Landing Page Conversion Essentials to Convert More
Lifeasapa and Neurosphere


Top view articles
Top 10 Beautiful Christmas Countdown Timers
65 Free JavaScript Photo Gallery Solutions
Best Free Linux Web Programming Editors
Top 50 Most Addictive and Popular Facebook mini games
Top 10 Free Web Chat box Plug-ins and Add-ons
Top 10 Best JavaScript eBooks that Beginners should Learn
50+ Beautiful Resources of HTML Form using CSS and JavaScript
The Ultimate JavaScript Tutorial in Web Design
10 Great JavaScript Frameworks for Faster JavaScript Application Development
HTML5 Web Workers Multithreading in JavaScript


Free JavaScript Tutorials & Articles
at www.JavaScriptBank.com