hide a textbox in javascript

Question

Trying to hide a text box using the below script:

function EnableTextBox(clientId2, clientId1) {

        var label = eval("document.getElementById('" + clientId2 + "')");
        var textBox = eval("document.getElementById('" + clientId1 + "')");

        if (label.Visible == true) {
            label.Visible = false;
            textBox.Visible = true;
        }
        else {
            label.Visible = true;
            textBox.Visible = false;
        }
    }

The text box is in the same cell as a label, and the event is created in the code behind during the gridview_ondatabound event:

if (e.Row.RowType == DataControlRowType.DataRow)
        {
            Label lblNotes = (Label)(e.Row.Cells[1].Controls[1]);
            TextBox tbNotes = (TextBox)(e.Row.Cells[1].Controls[3]);

            if (lblNotes != null)
            {

                lblNotes.Attributes.Add("methodstring", string.Format("EnableTextBox('{0}', '{1}')", lblNotes.ClientID, tbNotes.ClientID));
                lblNotes.Attributes.Add("onClick", "eval(this.methodstring)");
            }
        }

The problem I haven't gotten around yet is that the variable tbNotes in my script remains in a null state. Any suggestions?

Thanks

Would you be able to post the HTML, and is the lblNotes variable giving you what you expect? I ask because it could be a simple issue of the value you have in the square brackets being incorrect. — Shafiq Jetha
– Shafiq Jetha, Commented Dec 19, 2013 at 0:42

Win · Accepted Answer · 2013-12-19 01:42:58Z

2

You are almost there you just need to use style.display in order to show/hide the element.

In the following code, a textbox will be displayed and a label will be hidden if the label is clicked.

According to your logic, I don't know how to display the label back once it is hidden.

ASPX

<asp:GridView runat="server" ID="GridView1"
    AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Label runat="server" ID="NotesLabel" 
                    Text='<%# Eval("Notes") %>' />
                <asp:TextBox runat="server" ID="NotesTextBox" 
                    Text='<%# Eval("Notes") %>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<script type="text/javascript">
    function enableTextBox(label, textbox) {
        var lbl = document.getElementById(label);
        var txt = document.getElementById(textbox);

        if (lbl.style.display == "" || lbl.style.display == "block") {
            lbl.style.display = "none";
            txt.style.display = "block";

        } else {
            lbl.style.display = "block";
            txt.style.display = "none";
        }
    }
</script>

Code Behind

protected override void OnLoad(EventArgs e)
{
    if (!IsPostBack)
    {
        GridView1.DataSource = new List<Something>
        {
            new Something {Id = 1, Notes = "One"},
            new Something {Id = 2, Notes = "Two"},
        };
        GridView1.DataBind();
    }
}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        var notesLabel = e.Row.FindControl("NotesLabel") as Label;
        var notesTextBox = e.Row.FindControl("NotesTextBox") as TextBox;

        notesLabel.Attributes.Add("onclick", 
            string.Format("enableTextBox('{0}', '{1}')", 
            notesLabel.ClientID, notesTextBox.ClientID));
    }
}

public class Something
{
    public string Notes { get; set; }
    public int Id { get; set; }
}

Note: jQuery could be a lot easier, but it is out of the scope.

answered Dec 19, 2013 at 1:42

Win

62.4k13 gold badges106 silver badges190 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eugene S. Over a year ago

Came back to write some more detail to my answer, but I see you already handled that. +1

deadEddie Over a year ago

I like you approach and I almost have it working. The only problem I'm having is that if the text box visibility property is initially set to false, I get an error in the javascript saying that the object txt (in your code) is null. When I set it to true, I get functionality, but not how I want it to work

Eugene S. · Accepted Answer · 2013-12-19 00:46:25Z

1

Use e.Row.FindControl("ID_OF_CONTROL") instead of trying to go through the children collections.

if (e.Row.RowType == DataControlRowType.DataRow)
{
     Label lblNotes = e.Row.FindControl("lblNotes") AS Label; // Proper Id of the control
     TextBox tbNotes = e.Row.FindControl("tbNotes ") AS TextBox; // Proper Id of the control

     if (lblNotes != null && tbNotes !=null)
     {
         lblNotes.Attributes.Add("methodstring", string.Format("EnableTextBox('{0}', '{1}')", lblNotes.ClientID, tbNotes.ClientID));
         lblNotes.Attributes.Add("onClick", "eval(this.methodstring)");
     }
 }

answered Dec 19, 2013 at 0:46

Eugene S.

3,2551 gold badge27 silver badges36 bronze badges

Collectives™ on Stack Overflow

hide a textbox in javascript

2 Answers 2

ASPX

Code Behind

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

ASPX

Code Behind

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related