Changing label to textbox on javascript

Question

First of all I am not really good in english but Ill try to make it understandable as possible

So what I did was create a gridview wherein the column; two controls a label and a textbox label is set to be visible while textbox is vice versa

here is the client-code of my gridview

<asp:Image ID="img" onclick="javascript:Toggle(this);" runat="server" ImageUrl="~/Images/minus.gif"
                                    ToolTip="Collapse" Width="7px" Height="7px" ImageAlign="AbsMiddle" /></a>
                            <asp:Label ID="lbllastname" Height="15px" Width="180px" runat="server" Text='<%# Eval("CourseCatName")%>'></asp:Label>
                            <asp:TextBox ID="txtCourseCategory" AutoPostBack="true" runat="server" Text='<%# Eval("CourseCatName")%>'
                                Font-Size="XX-Small" Font-Names="Verdana" Style="display: none" OnTextChanged="txtCourseCategory_TextChanged"
                                Height="16px" Width="207px"></asp:TextBox><br />

I know that it is difficult to find control inside a gridview so what i did is create a atrribute on my server side to be passed on my javascript function Here is what I did

Dim txttry As TextBox = DirectCast(e.Row.FindControl("txtCourseCategory"), TextBox)
        Dim labeltry As Label = DirectCast(e.Row.FindControl("lbllastname"), Label)
        labeltry.Attributes.Add("onclick", "javascript:return validate('" + txttry.ClientID + "','" + labeltry.ClientID + "')")

And on my javascript ive created a function to call the controls

  function validate(txtobj, lblobj) {

        document.getElementById(lblobj).style.display = 'none';
        document.getElementById(txtobj).style.display = 'block';  
    }

So that code works and I think it is almost done but when I run my program and click on the label; the label hides but the textbox is below like there is a <br/> between then I check the codes again but found nothing that could make the textbox below. Sir/Madam what do you think is the problem or should I add a CSS for it? Or my code is the huge problem? I am open for suggestion be it bad or good. By the way I am really new on javascript

Thanks for your time and effort trying to read my problem.

nnnnnn · Accepted Answer · 2012-02-07 02:37:03Z

3

Try changing the following line:

document.getElementById(txtobj).style.display = 'block';

To be:

document.getElementById(txtobj).style.display = '';

// OR

document.getElementById(txtobj).style.display = 'inline';

If you set your element to be a block element it will display on the next line because that's what block elements do. If you set the display property to an empty string it should make it visible again by setting it to the default display type for the particular element type which in the case of an input element should be inline. If that doesn't work you could explicitly set it to inline.

More information about display is available here: http://www.quirksmode.org/css/display.html - complete with pictures and even a change-the-settings-on-the-fly demo at the bottom of the page.

answered Feb 7, 2012 at 2:37

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

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

1 Comment

Janwel Over a year ago

Thanks sir you are an angel. ^_^ thanks also for your description. It is working fine now.

NiNaD PaNDyA · Accepted Answer · 2013-04-05 05:57:26Z

0

You can also do it without using javascript. To do so you will need to use 2 panels. in one panel keep your label and in other panel keep your textbox. now keep the panel with textbox invisible by setting its visible property false. now in buttons click event get the text of label and store it in a string variable and change the visible property to false for the panel containing label. then change th visible property to true for the panel containing textbox and set the text property with the string in the variable.

answered Apr 5, 2013 at 5:57

NiNaD PaNDyA

1973 silver badges15 bronze badges

Collectives™ on Stack Overflow

Changing label to textbox on javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related