Enabling Textbox In Datalist Client Side 1

[daveonion]

Hi I have created a datalist which is bound to a table, but it has 2 additional columns, one is a checkbox the other a textbox. When a user ticks a checkbox i want them to be able to type into the text box however the textbox should be disabled until they tick the checkbox. I have the following code:-

<aspataList ID="Dl_MildModerate" runat="server" RepeatColumns="2"
BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px"
CellPadding="4" ForeColor="Black" GridLines="Vertical">
<FooterStyle BackColor="#CCCC99" />
<AlternatingItemStyle BackColor="White" />
<ItemStyle BackColor="#F7F7DE" />
<SelectedItemStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<ItemTemplate>
<asp:CheckBox ID="DL_Check" runat ="server" Width="5%" onclick="enableTextBox('<%=Txt_Dos.ChildID %>')" />
<asp:TextBox ID ="Txt_Dos" runat ="server" Width = "20%" Enabled="false" >
</asp:TextBox>
<%#Eval(&quot;Type&quot%>
</ItemTemplate>

</aspataList>



And I am using the following Java code

function enableTextBox(txtid)


{

var txt = document.getElementByID(txtid);
txt.enabled = true


}

however the function returns the object doesn't support this method error.

Any advice please would be welcome

 

[seaport]

First, you may try using Txt_Dos.ClientID, which is supposed to return the proper ID on the client side.

If this does not work, I usually use code like

onclick="enableTextBox(this)"

I understand the keyword this will return the object of the checkbox, not the textbox. However, the checkbox and the textbox are named with the same hierarchical method. So, in javascript, if the returned ID for the checbox is "xy...yxDL_Check", then the ID of the textbox will be "xy...xyTxt_Dos". In other words, in javascript, you can figure out the ID of the textbox using the ID of the checkbox.

Hope this helps.

 

[daveonion]

Hi Seaport thanks for your suggestions
I have tried enableTextBox(this), however it still returns the error'object doesnt support this property or method'

Please advise further thanks

 

[daveonion]

Okay i've just realised i had
var txt = document.getElementByID(txtid); (ByID) javascript is case sensitive so i change ByID to ById, it now goes past that line but returns a null object for txt.enabled = false, any ideas thanks.

 

[seaport]

This is actually a Javascript question now.

Anyway, "enabled" is not a valid property in javascript. "Disabled" is. Check out this link

http://www.w3schools.com/jsref/prop_text_disabled.asp

 

[daveonion]

Hi seaport, thanks again for your help. I think i'm really close now to cracking it as such. When i use 'this' and get look at the id it brings back
""ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder2_Dl_MildModerate_ctl00_DL_Check" which when i place that directly as the txtid the mentioned checkbox will now be disabled, my question is what syntax should i use to pass it back to the function i.e. should it be this.ClientID

Thanks again

 

[seaport]

My javascript is kind of rusty, but the code will be like that.

function enableTextBox(obj)
{

   var idCheckbox=obj.Id;
   var idTxt=idCheckbox.replace("DL_Check","Txt_Dos")  
   var txt = document.getElementById(idTxt);
    txt.disabled = false;


}

 

[daveonion]

Hi Seaport thanks for all your help, my javascript is extremely rusty, the final solution is as follows


function enableTextBox(obj)
{
var idCheckbox = obj.id;
var idTxt=idCheckbox.replace("DL_Check","Txt_Dos");
var txt = document.getElementById(idTxt);
if (txt.disabled == false)
{
txt.disabled = true;
txt.value = "";
}
else
{
txt.disabled = false;

}
}

 

[jbenson001]

You should be using the clientID of the object instead of manipulating the id you are passing in.

 

[daveonion]

Hi jbenson001,

I could be mistaken but the actual items within the datalist don't appear to have a childid property, when i debug the function and look at the properties available there is no childid property, please advise further. thanks

 

[jmeckley]

there is no ChildID property, you want ClientID.

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190
faq732-7259

 

[seaport]

Actually, I would agree with jbenson001 regarding using ClientID. Two reasons for that:
1. OnClick is not a recognized attribute for a checkbox inside a DataList asp.net control. The code eventually works, but the visual studio gives you a warning.
2. Using javascript to get the proper ID on the client side is not solid programming. What if someday .net changed its mind on how to generate those IDs.

I do not know what to get ClientID property in the markup directly. So to get ClientID, I will the vb.net code in the page_load event like that.

Dl_MildModerate.DataBound();

      Dim gr As DataListItem
      For Each gr In Dl_MildModerate.Items
        If gr.FindControl("txt") IsNot Nothing Then
          CType(gr.FindControl("chk"), Checkbox).Attributes.Add("Onclick","javascript:enableTextbox('" & CType(gr.FindControl("txt"), TextBox).ClientID & "')")
        End If
      Next