We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

Using javascript to insert text into a textbox in a DetalilView

robaherne
robaherne asked
on
Medium Priority
1,775 Views
Last Modified: 2012-08-13
I'm trying to use this...

function SetSelected(code)
        {
              document.getElementById("TextBox1").value = code;
       {

... to insert a value into a textbox contained in a DetailsView.

The name of the textbox is 'TextBox1' but when rendered in html it is 'table_Insert$ctl01'.

I can get it to work with a test textbox outside of the details view... but I cant get it to refer to the text box in the DetailsView. Please help!

Comment
Watch Question

HonorGodSoftware Engineer
CERTIFIED EXPERT

Commented:
What kind of DOM element is "TextBox1"?


function SetSelected(code) {
  var textbox = document.getElementById("TextBox1")
  alert( 'TextBox1.nodeName = ' + textbox.nodeName )
  textbox.value = code;
}

Open in new window

Commented:
How are you calling the SetSelected function?

Author

Commented:
Thanks...

The TextBox1 is in the DetailsView Below... as is the call to the SetSelected function, which is in an imageMap href=""


<asp:DetailsView ID="table_Insert" runat="server" AutoGenerateRows="False" DataKeyNames="id" DataSourceID="ObjectDataSource1" CellPadding="4" ForeColor="#333333" GridLines="None" DefaultMode="Insert" Caption="<div style='text-align:left;'><b>Add Postcode</b></div>" OnItemInserting="table_Insert_ItemInserting" Width="250px" >
        <Fields>
            <asp:BoundField DataField="postcode"  HeaderText="Postcode" SortExpression="postcode" >
                <HeaderStyle Font-Bold="False" />
            </asp:BoundField>
            <asp:TemplateField HeaderText="Zone" SortExpression="zone">
                <EditItemTemplate>
                    <asp:TextBox   ID="TextBox1" runat="server" Text='<%# Bind("zone") %>'></asp:TextBox>
                </EditItemTemplate>
                <InsertItemTemplate>
                    
                    <asp:DropDownList ID="DropDownList1" runat="server" Text='<%# Bind("zone") %>'>
                    <asp:ListItem Value="1" Text="1"></asp:ListItem>
                    <asp:ListItem Value="2" Text="2"></asp:ListItem>
                    
                    </asp:DropDownList>
                </InsertItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("zone") %>'></asp:Label>
                </ItemTemplate>
                <HeaderStyle Font-Bold="False" />
            </asp:TemplateField>
            <asp:CommandField ShowInsertButton="True" />
        </Fields>
        <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <CommandRowStyle BackColor="#D1DDF1" Font-Bold="True" />
        <RowStyle BackColor="#EFF3FB" />
        <FieldHeaderStyle BackColor="#DEE8F5" Font-Bold="True" />
        <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
        <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <EditRowStyle BackColor="#2461BF" />
        <AlternatingRowStyle BackColor="White" />
    </asp:DetailsView>
 
 
<img src="../Image/LoindonPostcodes.gif" width="430" height="392" usemap="#map" style="border:0px;">
<map id="map" name="map">
<area href="javascript:SetSelected('NW1')" shape="POLY" coords="116,92,113,69,96,69,90,50,61,46,79,74,74,85,84,85,82,92,94,96,107,90"/>

Open in new window

Commented:
Will it work for you if you were to replace the
<asp:TextBox   ID="TextBox1" runat="server" Text='<%# Bind("zone") %>'></asp:TextBox>
with
<input type="text" id="TextBox1" name="TextBox1" value="<%# Bind("zone") %>"/>
and obtain the value of the textbox via post?

Author

Commented:
Thanks...

That doesn't seem to work. It starts complaining that "A call to bind must be assigned to a property of a control inside a template".

Just to clarify... I want to use this:

<area href="javascript:SetSelected('NW1')" shape="POLY" coords="116,92,113,69,96,69,90,50,61,46,79,74,74,85,84,85,82,92,94,96,107,90"/>

to set the value of TextBox1 to 'NW1'.

Commented:
OK this is going to be tricky,
 place a hidden field outside of your DetailsView:
<asp:HiddenField ID="HiddenField1" runat="server" />

then on your code behind, on the DetailsView's Databound event put this in

HiddenField1.value = ctype(sender,DetailsView).FindControl("TextBox1").ClientID
(assuing you are using VB.NET and the textbox's ID is TextBox1)

then on the html side of the page(where you have your DetailsView)
use the value of the hidden field like this

function SetSelected(code)
        {
              document.getElementById("<%=HiddenField1.ClientId%>").value = code;
       {

This should workout for you

Commented:
Sorry, made a mistake, the javascript function should me like this

function SetSelected(code)
        {
              var temp = document.getElementById("<%=HiddenField1.ClientId%>").value;
              document.getElementById(temp).value = code;
       {

Author

Commented:
Thanks that looks good! Although I just getting this error...

Error      297      'System.Web.UI.WebControls.HiddenField' does not contain a definition for 'ClientId'      C:\Documents and Settings\Robski\My Documents\Visual Studio 2005\WebSites\........

Author

Commented:
That was just 'ClientId' should have been 'ClientID'

Now I'm getting...

Object reference not set to an instance of an object.

"HiddenField1.Value =  table_Insert.FindControl("TextBox1").ClientID;"

which I thought was my c# equivallent of your...

"HiddenField1.value = ctype(sender,DetailsView).FindControl("TextBox1").ClientID"

Do you know what the C# equivallent of ctype is?




Commented:
I think for c# its

HiddenField1.value = (System.Web.UI.WebControls.DetailsView)sender.FindControl("TextBox1").ClientID

Author

Commented:
Dammit!

Object reference not set to an instance of an object.

HiddenField1.Value = ((DetailsView)sender).FindControl("TextBox1").ClientID;
Commented:
Make sure the statement is inside the DataBound event, to do this, while on design mode, on the properties pane there should be a little lightning bolt, click that and then find the DataBound event. Double click the event name and it should create an event handler on the code behind. Then in that event handler put in the code. It  should look something like this:

protected void table_Insert_DataBound(object sender, EventArgs e)
{
     DetailsView temp = (System.Web.UI.WebControls.DetailsView)sender;
     HiddenField1.Value = temp.FindControl("TextBox1").ClientID;
}

also make sure the ID of the textbox is exactly how spelled inside the "FindControl" method or else you'll get the object reference exception.

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
Hi there... thanks for all your help. I think I've nailed down the problem.

I can identify the DetailsView text box in the code behind because this works...

    TextBox mybox = (TextBox)((DetailsView)sender).FindControl("TextBox1");

But as soon as I make a reference to it's ClientID....

   string boxid = mybox.ClientID;

I get...

"Object reference not set to an instance of an object.
string boxid = mybox.ClientID;"

It's as if there is no ClientID associated with the box!!!???

Author

Commented:
On second thoughts... I don't necessarily have the TextBox object after declaring...

   TextBox mybox = (TextBox)((DetailsView)sender).FindControl("TextBox1");

Because if I try.... mybox.Text = "Whatever"; it gives me the "Object reference not set to an instance of an object." error again.

So still... It cant find the TextBox in the details view by it's ID "TextBox1".

I've tried changing it's ID and even using the html generated ID from the page source but neither works!!!

Author

Commented:
Strange....

I also have a dropdown list in the detailsview and I can alter the selectedIdex on that using....

  DropDownList mylist = (DropDownList)((DetailsView)sender).FindControl("DropDownList1");
  mylist.SelectedIndex = 1;

But altering the textbox like this does not work...
   
   TextBox mybox = (TextBox)((DetailsView)sender).FindControl("TextBox1");
   mybox.Text = "whatever";

What the hell is going on???!!!

Author

Commented:
Figured it out...

The TextBox in my details view was not the the one I had set up in the code as a template and named "TextBox1".

I needed to use the "convert field into a template field" first and then I could refer to it.

Author

Commented:
Thanks a million... I understand whats going on a lot better now!
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.