I have sung the praises of jQuery and it’s value for enhancing your XMod Pro forms recently in another post, using jQuery to create running totals. In this blog post I will demonstrate how you can show or hide a form control based on a chosen radio button.

I had a recent request where the client wanted an optional text box to appear when a user chose a particular item from a range of values. They wanted the text box to appear when they selected the option for the number of employees greater than 50. I spent a few hours trying to work out how to do this before the client decided this might confuse the user more than having an optional text box constantly visible.

So I hope the time I wasted on this might come in useful for something or someone else. There are many ways to tackle the problem of finding radio button items on a form and handling their events. I tried several of them but the one I found most reliable is to use Firebug to first get the ID of the radio button item and then select this with jQuery. So once you have Firebug installed on Firefox you can right click to “Inspect the Element”. This will show you the HTML of the specific item you have selected. There you will see the radio button items you want to work with.

For example:

<table id="dnn_ctr1984_XMPFormView_ctl00_ctl00_ctl00_rblEmployees" class="rblClass" border="0">
        <tr>
            <td>
            <input id="dnn_ctr1984_XMPFormView_ctl00_ctl00_ctl00_rblEmployees_0" type="radio" name="dnn$ctr1984$XMPFormView$ctl00$ctl00$ctl00$rblEmployees" value="1" />
            <Label For="dnn_ctr1984_XMPFormView_ctl00_ctl00_ctl00_rblEmployees_0">10 - 20</Label>
            </td>
        </tr>
        <tr>
            <td>
            <input id="dnn_ctr1984_XMPFormView_ctl00_ctl00_ctl00_rblEmployees_1" type="radio" name="dnn$ctr1984$XMPFormView$ctl00$ctl00$ctl00$rblEmployees" value="2" />
            <Label For="dnn_ctr1984_XMPFormView_ctl00_ctl00_ctl00_rblEmployees_1">20-50</Label>
            </td>
        </tr>
        <tr>
            <td>
            <input id="dnn_ctr1984_XMPFormView_ctl00_ctl00_ctl00_rblEmployees_2" type="radio" name="dnn$ctr1984$XMPFormView$ctl00$ctl00$ctl00$rblEmployees" value="3" />
            <Label For="dnn_ctr1984_XMPFormView_ctl00_ctl00_ctl00_rblEmployees_2">Greater than 50</Label>
            </td>
        </tr>
    </table>

As you can see above, this radio button list contains three options which are all assigned ID’s appended with a number. The problem here is that if I used the ID’s as they are stored here, when I or someone else copies the code to another location, the module ID which is embedded in the ID will change. Then, the code will not find the correct item. So, to get around this in my code, I used the following:

<SelectCommand CommandText="SELECT '#dnn_ctr' + @moduleID + '_XMPFormView_ctl00_ctl00_ctl00_rblEmployees_0' AS rbl1ID, '#dnn_ctr' + @moduleID + '_XMPFormView_ctl00_ctl00_ctl00_rblEmployees_1' AS rbl2ID, '#dnn_ctr' + @moduleID + '_XMPFormView_ctl00_ctl00_ctl00_rblEmployees_2' AS rbl3ID">
	<Parameter Name="moduleID" Value='[[Module:id]]'/>
</SelectCommand>

As you can see, I’ve brought in the module ID and created ID’s for the radio buttons which I can use in the Javascript (jQuery) later on.

Now in jQuery if I want to select the first radio button and act on it’s click event I can simply do this:

$("[[rbl1ID]]").bind('click', function(){
$('#XMPField').hide();
});

As you can see, XMod Pro rather brilliantly recognizes the [[rbl1ID]] field token and puts the ID into the jQuery selector command! The second line finds a control with an ID=”XMPField” and hides it. In order to show the field, we only have to change the ID of the required item and use .show() instead.

You can paste the following into an XMod Pro form and it should work straight away. Or you can take a look at the demo here:

<AddForm >

	<SelectCommand CommandText="SELECT '#dnn_ctr' + @moduleID + '_XMPFormView_ctl00_ctl00_ctl00_rblEmployees_0' AS rbl1ID, '#dnn_ctr' + @moduleID + '_XMPFormView_ctl00_ctl00_ctl00_rblEmployees_1' AS rbl2ID, '#dnn_ctr' + @moduleID + '_XMPFormView_ctl00_ctl00_ctl00_rblEmployees_2' AS rbl3ID">
		<Parameter Name="moduleID" Value='[[Module:id]]'/>
	</SelectCommand>

	<ScriptBlock ScriptId="AlertScripts" RegisterOnce="true">

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

	<script type="text/javascript">
	// this tells jquery to run the function(s) below once the DOM is ready
	$(document).ready(function() {

	// catch the click event for the first radio button and hide the text box
	$("[[rbl1ID]]").bind('click', function(){
	$('#XMPField').hide();
	});

	// catch the click event for the second radio button and hide the text box
	$("[[rbl2ID]]").bind('click', function(){
	$('#XMPField').hide();
	});

	// catch the click event for the third radio button and SHOW the text box
	$("[[rbl3id]]").bind('click', function(){
	$('#XMPField').show();
	});

	});
	</script>

	</ScriptBlock>

<div>This is a very simple example to demonstrate how jQuery can be used to show and hide form elements based on user actions.</div>

<table>
	<tr>
		<td>
			<Label Target="rblEmployees" Text="How many employees are there in your organisation?" />
			
			<RadioButtonList id="rblEmployees" Class="rblClass" DataField="rblEmployees" DataType="string">
				<ListItem Value="1">10 - 20</ListItem>
				<ListItem Value="2" >20-50</ListItem>
				<ListItem Value="3">Greater than 50</ListItem>
			</RadioButtonList>
		</td>
		<td>
			<div id="XMPField" style="margin-top: 20px; margin-left: 10px;
 background-color: white; border: 1px solid gray; padding: 5px; width: 50%;
 display: none;"> 
			<Label for="hide_this" text="Please enter approx number of employees"/> 
			<Textbox id="hide_this"/>
			</div>
		</td>
	</tr>
	<tr>
		<td>
		</td>
	</tr>
</table>

</AddForm>

I’m fairly new to jQuery so I’m sure there are better ways to do this. I hope if you read this you will comment so that I can improve my jQuery. Or if there are any problems then please let me know.

Thanks for reading.

Gus