I have a gridview with a dropdownlist and a textbox to search the gridview.  The dropdownlist specifies the column to search and the text box holds the string to search for.   Like this:

<asp:DropDownList ID="SearchByDropDownList" runat="server">
     <asp:ListItem Text="First Name" Value="first_name" />
     <asp:ListItem Text="Last Name" Value="last_name" />
     <asp:ListItem Text="Birth Date" Value="birth_date" />
</asp:DropDownList>
        
<asp:TextBox ID="SearchTextBox" runat="server"></asp:TextBox>

<asp:Button ID="SearchButton" runat="server" Text="Search" OnClick="SearchButton_Click" />
<asp:Button ID="ClearButton" runat="server" Text="Clear" OnClick="ClearButton_Click" />

 
What I want to happen is that when the user selects the "Birth Date" list item, the single text box changes into two text boxes so that the user can specify a date range (i.e., starting date and ending date).  If the user selects one of the non-date list items then the display would change back to a single text box.  Preferably it would be client-side, so that no round trip to the server is necessary just to change the display.  How can I do this?

HERE AN EXAMPLE HOW U CAN DO IT:
TEST PURPOSE GET A NEW FORM(DON'T INCLUDE MASTER PAGE)
UNDER FORM TAG PASTE THE BELOW CODE:
        <asp:DropDownList ID="SearchByDropDownList" runat="server" onchange="changeParameter();">    
        <asp:ListItem Text="First Name" Value="first_name" />    
        <asp:ListItem Text="Last Name" Value="last_name" />    
        <asp:ListItem Text="Birth Date" Value="birth_date" />
        </asp:DropDownList>       
        <asp:TextBox ID="SearchTextBox1" runat="server"></asp:TextBox>   
        <asp:TextBox ID="SearchTextBox2" runat="server" CssClass="hide"></asp:TextBox>   

UNDER HEAD TAG PASTE THE BELOW SCRIPT+STYLE:
    <style type="text/css">.hide{display:none;}</style>
    <script language="javascript" type="text/javascript">
    <!--
    function changeParameter()
    {
        if (document.getElementById("SearchByDropDownList").selectedIndex <2)
            document.getElementById('SearchTextBox2').className= 'hide';
        else
            document.getElementById('SearchTextBox2').className= '';
    }
    //-->
    </script>
NOW RUN THE PAGE & CHECK IT. IF U WANT TO INCLUDE MASTER PAGE LET ME KNOW.

HOPE IT WILL HELP YOU.
MARK AS ANSWER IF ITS HELPED YOU.

Thanks for your reply.  This page will use a master page.  How does this change things?  Does it change the way I have to reference the controls in the javascript? 

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default13.aspx.cs" Inherits="Default13" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<script language="javascript" type="text/javascript">

document.getElementById('ctl00_ContentPlaceHolder1_SearchTextBox2').className= 'hide';

else

//-->

<style type="text/css">.hide{display:none;}</style>

<asp:ListItem Text="First Name" Value="first_name" />

<asp:ListItem Text="Birth Date" Value="birth_date" />

<asp:TextBox ID="SearchTextBox1" runat="server"></asp:TextBox>

</asp:Content>

HOPE IT WILL HELP YOU.
MARK AS ANSWER if its helped you.

 Okay this is working so now if the user chooses "Birth Date" from the drop down list they are presented with two text boxes to search (I even added a calendar control from the AJAX Control Toolkit).  However, how do I remember this state after a post back?  After a post back the two text boxes are hidden and the single text box is displayed.

 I refactored the design a little bit, but basically I got this working after postback by registering the script as a startup script by calling RegisterStartupScript() from code behind and then calling the changeParameter() function after the javascript function definition.

OHH SORRY tmpuzer i forget to reply ur post.
YES register client script in pageload event(outside of !ispostback method) will resolve ur problem.