Watermark in textbox dependent on selected Dropdown ID

Question

I have a connected SQL Server database in Visual Studio and am displaying its content in a grid. I created a dropdown menu with the column names as selectable options and a text field to filter for specific content, e.g., DropDown = "Start" - Textfield = 14.03.2015 = Filter Column "Start" for each entry that contains "14.03.2015" - and display it in the Grid.

To make the usage more intuitive, i would like to display text like "dd.mm.yyyy" when for example a option from the dropdown is selected which requires a date as input in my textbox.

The Grid looks like this: http://abload.de/img/untitled123yqkyn.png

Below you can find my code for the Grid:

    <asp:DropDownList ID="DropDownList1" runat="server">
    <asp:ListItem>Organizer</asp:ListItem>
    <asp:ListItem>Room</asp:ListItem>
    <asp:ListItem>Creation Time</asp:ListItem>
    <asp:ListItem>Start</asp:ListItem>
    <asp:ListItem>End</asp:ListItem>
    <asp:ListItem>Last Modified</asp:ListItem>
    </asp:DropDownList> &nbsp;

    <asp:TextBox ID="TextBox1" runat="server" Width="315px"></asp:TextBox> &nbsp;



    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Search" Width="100px"/> &nbsp;
    <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Reset Search" Width="100px"/>
    <br/>
    <br/>

    <asp:GridView ID="GridView1" runat="server" GridLines="Both" BorderColor="White" BorderStyle="Solid" CellPadding="4" ForeColor="#333333" AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="SqlDataSource1" AllowSorting="True"  pagesize="1000" AllowPaging="True" HorizontalAlign="Center" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
    <AlternatingRowStyle BackColor="White"/>

        <Columns>
        <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="ID" ItemStyle-HorizontalAlign="Center"  ItemStyle-BorderColor="White"/>
        <asp:BoundField DataField="Organizer" HeaderText="Organizer" SortExpression="Organizer" ConvertEmptyStringToNull="False" HtmlEncode="False" HtmlEncodeFormatString="False" InsertVisible="False" ItemStyle-BorderColor="White"/>
        <asp:BoundField DataField="Room" HeaderText="Room" SortExpression="Room" ItemStyle-BorderColor="White"/>
        <asp:BoundField DataField="DateTimeCreated" HeaderText="Creation Time" SortExpression="DateTimeCreated" ItemStyle-BorderColor="White"/>
        <asp:BoundField DataField="Start" HeaderText="Start" SortExpression="Start" ItemStyle-BorderColor="White"/>
        <asp:BoundField DataField="End" HeaderText="End" SortExpression="End" ItemStyle-BorderColor="White"/>
        <asp:BoundField DataField="LastModifiedTime" HeaderText="Last Modified" SortExpression="LastModifiedTime" ItemStyle-BorderColor="White"/>
        <asp:CheckBoxField DataField="Cancelled" HeaderText="Cancelled" SortExpression="Cancelled" ItemStyle-HorizontalAlign="Center" ItemStyle-BorderColor="White"/>
        </Columns>

    <EditRowStyle BackColor="#2461BF"/>
    <FooterStyle BackColor="#E1000F" Font-Bold="True" ForeColor="White"/>
    <HeaderStyle BackColor="#E1000F" Font-Bold="True" ForeColor="White" Font-Underline="false"/>
    <PagerStyle BackColor="#E1000F" ForeColor="White" HorizontalAlign="Center"/>
    <RowStyle BackColor="#F9F9F9"/>
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333"/>
    </asp:GridView>

    <asp:SqlDataSource ID="xyz" runat="server" ConnectionString="<%$ ConnectionStrings:xyz %>" SelectCommand="SELECT * FROM [xyz]"></asp:SqlDataSource>
 </center>

And the C# code i'm using to filter the Grid:

protected void Page_Load(object sender, EventArgs e) 
{

}

protected void Button1_Click(object sender, EventArgs e) 
{

    string FilterExpression = string.Empty;
    if (DropDownList1.SelectedValue.ToString().Equals("Start")) 
    {

        FilterExpression = string.Format("Start >= '{0} 0:00:00' AND Start <= '{0} 23:59:59'", TextBox1.Text); 
    }

    else if (DropDownList1.SelectedValue.ToString().Equals("End"))
    {

        FilterExpression = string.Format("End >= '{0} 0:00:00' AND End <= '{0} 23:59:59'", TextBox1.Text); 
    }

    else if (DropDownList1.SelectedValue.ToString().Equals("Creation Time"))
    {

        FilterExpression = string.Format("DateTimeCreated >= '{0} 0:00:00' AND DateTimeCreated <= '{0} 23:59:59'", TextBox1.Text); 
    }

    else if (DropDownList1.SelectedValue.ToString().Equals("Last Modified"))
    {

        FilterExpression = string.Format("LastModifiedTime >= '{0} 0:00:00' AND LastModifiedTime <= '{0} 23:59:59'", TextBox1.Text); 
    }

    else 
    {

        FilterExpression = string.Concat(DropDownList1.SelectedValue, " Like '%{0}%'");
    }

    SqlDataSource1.FilterParameters.Clear();
    SqlDataSource1.FilterParameters.Add(new ControlParameter(DropDownList1.SelectedValue, "TextBox1", "Text"));
    SqlDataSource1.FilterExpression = FilterExpression;
}

protected void Button2_Click(object sender, EventArgs e)
{

    TextBox1.Text = string.Empty;
    SqlDataSource1.FilterParameters.Clear();
}

protected void ImageButton_Click(object sender, EventArgs e)
{

    TextBox1.Text = string.Empty;
    SqlDataSource1.FilterParameters.Clear();
}

I would like to have it attached to the if/else if Statments. But i simply lack the knowledge on how to do this. Something like this:

 if (DropDownList1.SelectedValue.ToString().Equals("Start")) 
        { 

         Displaywatermark ("dd.mm.yyyy");
         FilterExpression = string.Format("Start >= '{0} 0:00:00' AND Start <= '{0} 23:59:59'", TextBox1.Text); 
        }

Answer 1

HTML5 allows for the placeholder attribute of the <input> tag. Supposing that you have jQuery enabled on your website, what you could do is trigger something like the following upon the client changing DropDownList1:

$("#TextBox1").attr("placeholder", $("#DropDownList1").find("option:selected").html());