I had a very interesting requirement on one of the pages I was working on in my latest project recently. It of course had to render correctly in both the latest version of IE and Firefox. Not too difficult to do. It had to use our existing masterpage. Ok, again, not difficult at all. In this page, I had a radiobuttonlist control that needed to have a text box control conditionally show or hide based on which button in the list was clicked. Ok, a little more difficult. But that text box control also had to be a required field when it did show. Ok that might be tough to do.
Well here's how we accomplished it
On the page we added our controls
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="0">0</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem>
</asp:RadioButtonList>
<div id="divTB" style="display:none">
<input id="Text1" type="text" onKeyPress="return ValidationError()" />
<span id="lblValidator" style="display:block;"></span>
</div>
<asp:Button runat="server" ID="btn" Text="submit" OnClick="btn_Click" />
<asp:Label runat="server" ID="lblErr" ></asp:Label>
Now let me explain what you are looking at here. First you see the radiobuttonlist control with four buttons in it. Next we have a div that will eventually be the mechanism to show and hide the textbox control and span you see inside of it. The span inside of that div is what is going to server as our custom required field validator. Next you see the traditional submit button with it On Click event handler and finally a label to show us if anything went wrong.
We needed to capture the click event from each button in the radiobuttonlist and do something if it was a certain value (show or hide the div & the control inside of it) so to do that we add the javascript as an attribute in the Page_Load event of the .CS. We also need to add a handler for the submit button to check if text has been entered in the textbox, if it is showing.
protected void Page_Load(object sender, EventArgs e)
{
btn.Attributes.Add("onclick", "return ValidateText()");
RadioButtonList1.Attributes.Add("onclick", "return
rbClick(event)");
}
You might be wondering why we are passing the event as a parameter in the rbClick event. Well we need to get access to the event variable so that we can know what it was that was clicked on the page. With this event, we will know what the value of that item was so that we can make a decision on whether or not to show or hide our div. In IE we can use window.event but that not a standard mechanism so therefore we need to pass the event to our function so that we can be sure to be standards compliant.
In the aspx page we now add our javascript functions. We have three:
- One to handle the clicking of a radiobutton (rbClick)
- One to handle the validation of the textbox (ValidateText)
- One to remove the validator once we begin to type something in the textbox (ValidationError)
Here is the code:
<script type="text/javascript">
<!--
function rbClick(evt)
{
evt = (evt) ? evt : ((window.event) ? window.event : "")
if (evt)
{
var elem
if (evt.target)
{
elem = (evt.target.nodeType == 3) ? evt.target.parentNode:
evt.target
}
else
{
elem = evt.srcElement
}
if (elem)
{
// process event here
if ((elem.value == 0) ||(elem.value == 4) )
{
document.getElementById("divTB").style.display=
"none";
}
else
Join the conversation! Your thoughts help the community grow.