Adding a Javascript onclick event to a Radio Button List Item on DataBound Pt 2

A while back I wrote a quick article about adding a javascript onclick event to each individual radio button list “Adding a Javascript onclick event to a Radio Button List Item on DataBound“.

I was speaking to an early learner via email regarding what we would use this type of scenario for so thought I would put together something very quickly just to maybe flair some creativity.

The following demo uses the JQuery library.  What I have done is simply change the onclick event from showing an alert box to populate a div, a textbox and a hyperlink with the value of the radio button.

All I have done is add the JQuery library to the page and changed

 <script language=javascript type="text/javascript">
    function ShowExt(object)
    {
    alert("Value Clicked :" + object);
    }
    </script>

to the following

<script language="javascript" type="text/javascript">
    function ShowExt(object)
    {   
    $('#JqueryMessageBox').html('This is a div showing value :' + object);  
    $('#JqueryMessageBox').show('slow').animate({opacity:1.0},3000).fadeOut('slow');   
    $('#textdemo').show('slow').animate({opacity:1.0},3000).fadeOut('slow');
    $('#textdemo').val('Textbox value : ' +object); 
    $('#vistscotland').show('slow');
    $('#vistscotland').text('Link showing : ' + object);    
    }
    </script>

For the above script to work we also need to add in the following html under the radiobutton list

    <div id="JqueryMessageBox" style="margin-top:20px;margin-left:10px;
background-color:white;border:2px solid #83A7BF;padding:5px;width:50%;
display:none;">
        </div>
        <input type="text" maxlength="55" name="textdemo" id="textdemo" 
style="display:none;margin-top:10px;margin-left:10px;" />
        <a href="http://www.visitscotland.com" id="vistscotland" 
style="display:none;margin-top:10px;margin-left:10px;"></a>

The style options contain alot of formatting options but really all that is needed is the display:none. In this case I’ll keep it kind of pretty.  All the Javascript is doing is looking for the Id’s of the elements under the Radiobutton list, running through an effect and then populating the element with the value of the object that called the onclick event.  Nothing complicated, short and sweet.  I would like to iterate even though it’s obvious the event/effects won’t work if javascript is disabled.

To see the demo in action : http://dev.siphilp.co.uk/OnClickRadioButtonListwithjquery.aspx

Related Posts:

• jQuery – Fun with Radio Button lists, checkboxes and labels
• jQuery – Revisit – Fun with Radio Button lists, checkboxes and labels