How to find and modify an asp.net control with JavaScript?

Question

This has been bothering me for quite some time. I'm simply trying to change the value of a textbox defined in asp.net, which normally works when it is not within a LoggedInTemplate.

I've searched everywhere on the net and even here, but the only thing I can find close to doing what I need is here Finding an asp:button and asp:textbox in Javascript. Unfortunately that doesn't work. Here's what I have so far:

<head id="Head1" runat="server">
  <script src="../../scripts/webeffects.js" type="text/javascript" language="javascript"></script>
</head>
<asp:LoginView ID="LoginView1" runat="server">
  <LoggedInTemplate>
  <div class="lotto_pick_container">
    <table runat="server" id="tblLottoPick">
      <tr><th colspan="3">Pick a Lotto Number</th></tr>
  <tr>
    <td><asp:TextBox ID="txt1stNum" runat="server"></asp:TextBox></td>
    <td><asp:TextBox ID="txt2ndNum" runat="server"></asp:TextBox></td>
    <td><asp:TextBox ID="txt3rdNum" runat="server"></asp:TextBox></td>
  </tr>
  <tr>
    <td><asp:Button ID="cmdSubmitPick" runat="server" Text="Submit Lotto Number" 
        onclientclick="return validateLottoPicks()" /></td>
  </tr>
</table>
  </div>
  </LoggedInTemplate>
</asp:LoginView>

Right now I'm trying to use an external js script to find a textbox and modify it with an arbitrary value of 12, just so that I know it can work:

function validateLottoPicks() {
  document.getElementById('<%= LoginView1.FindControl("txt2ndNum").ClientID %>').value = 12
}

When I debug this with Firebug it seems all my other code works, except for this one function. I have verified the function gets called, it's just this line that doesn't work. Can someone please provide some guidance? I'll send milk and cookies.

Update:

Thanks for all the help from everyone. This was my first time using Stack Overflow and I was definitely impressed by the quick responses.

It turns out my actual problem was that using <%= LoginView1.FindControl("txt2ndNum").ClientID %> does not work in external js scripts. I didn't know this. Once, I put the function in the header of my page everything worked. Now I'm going to avoid using ASP.NET controls because I don't want to deal with that again, and it makes more sense if I ever decide to use something other than ASP.NET.

What ID is output to the script? What ID does the control actually get? What error is raised? — Dave
– Dave, Commented Jun 20, 2011 at 14:20
Don't hack the ASP.NET ViewState on the client using javascript. Either use ASP.NET controls or use HTML inputs and Form.Request — Raynos
– Raynos, Commented Jun 20, 2011 at 14:30
@Raynos I didn't know that what I am trying to do is considered hacking ViewState. Really, I'm just trying to do some client-side validation to save trips to the server. Is my whole approach wrong? — SantosLHalper
– SantosLHalper, Commented Jun 20, 2011 at 16:04
clientside validation is fine. ASP.NET is notorious for not remembering state changes made in JavaScript once server side controls get to the server. Btw your approach is wrong, your using ASP.NET ;) — Raynos
– Raynos, Commented Jun 20, 2011 at 16:11

Aristos · Accepted Answer · 2011-06-20 15:17:20Z

2

The problem is that you have set visible=false on this line

<table runat="server" id="tblLottoPick" visible="false">

From that moment the controls are not rendered the javascript can not find this control. If you do not wish to show this table use css, for example style="display:none;" so its rendered but not visible. All the rest seems to me that working.

Update

From the comments also seems that this code is not inside the aspx page, so the ClientID can not work and not found. Add this somewhere in the header in the page that have this LoginView1 control.

function validateLottoPicks() {
  document.getElementById('<%= LoginView1.FindControl("txt2ndNum").ClientID %>').value = 12
}

edited Jun 20, 2011 at 15:17

answered Jun 20, 2011 at 14:24

Aristos

66.7k16 gold badges117 silver badges154 bronze badges

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

8 Comments

Dave Over a year ago

Good catch. I didn't even see the visible="false" property.

SantosLHalper Over a year ago

I removed the visible="false" and it still doesn't work. I'm getting this message in Firebug: TypeError: document.getElementById("<%= tblLottoPick.FindControl(\"txt2ndNum\").ClientID %>") is null

Aristos Over a year ago

@Peter Where are you have place the <%= tblLottoPick.FindControl(\"txt2ndNum\").ClientID %>, because seems that you have includ it on JS and is not render it !

Aristos Over a year ago

@Peter you need to add the <%= tblLottoPick.FindControl("txt2ndNum").ClientID %> inside the aspx page. !

SantosLHalper Over a year ago

I added this to the header and it still doesn't work. Regardless, shouldn't it work anyway, I'm using an external script?

|

Duncan Howe · Accepted Answer · 2011-06-20 14:26:54Z

0

Try

tblLottoPick.FindControl("txt2ndNum").ClientID instead.

answered Jun 20, 2011 at 14:26

Duncan Howe

3,03521 silver badges20 bronze badges

Comments

Trevor · Accepted Answer · 2011-06-20 15:29:43Z

0

Try putting this into a javascript string variable. What are you getting?

'<%= LoginView1.FindControl("txt2ndNum").ClientID %>'

Because you shouldn't have to do that. Can you just do this?

document.getElementById('txt2ndNum')

Also, check in firebug to see what the ID value is set to for that control (i.e. the rendered textbox). I mean see what it's rendered as. You just need to get the right id.

answered Jun 20, 2011 at 15:29

Trevor

4,9002 gold badges34 silver badges41 bronze badges

3 Comments

SantosLHalper Over a year ago

I get: id="LoginView1_txt2ndNum" and name="LoginView1$txt2ndNum"

Trevor Over a year ago

Ok. And can you find a control in the DOM called "LoginView1_txt2ndNum"? Are you sure it exists? Because I think it might be rendering as 'txt2ndNum'.

SantosLHalper Over a year ago

I tried this and it does exist! I managed to capture the value using the id without the LoginView1.FindControl

Collectives™ on Stack Overflow

How to find and modify an asp.net control with JavaScript?

3 Answers 3

Update

8 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update

8 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related