Javascript returns undefined with asp.net master pages

Question

I'm running into a bit of an issue. My JavaScript function returns "undefined" when using master pages. However, when I'm not using master pages, it works fine. Here is my code:

HTML:

<input id="txtPhoneNumberAreaCode" class="TextBox" runat="server" type="text" onkeyup="GoToNextTextBox(this.id, 3, 'cphMainArea_txtPhoneNumberFirstThree')" />

The Javascript:

function GoToNextTextBox(CurrentTextBox, MaxCharLength, NextTextBox) {
    alert(CurrentTextBox.value);//pops up "undefined"
    if (CurrentTextBox.value.length == MaxCharLength) {
        NextTextBox.focus();
        NextTextBox.style.backgroundColor = '#FFFFFF';
    }

Again, this works fine when not using master pages. So I'm completely confused.

you are passing this.id onkeyup, instead of alert(CurrentTextBox.value) can you try alert or better still console.log(CurrentTextBox) instead? — Lee Gary
– Lee Gary, Commented Mar 13, 2014 at 3:59
either pass this.value to only access value, or just this to access whole element — Vinay Pratap Singh Bhadauria
– Vinay Pratap Singh Bhadauria, Commented Mar 13, 2014 at 4:07

Amit Joki · Accepted Answer · 2014-03-13 04:15:47Z

1

This is because, you are doing it wrong.

In GoToNextTextBox(), you are expecting a DOM element, but you are passing only its id.

DO this:

<input id="txtPhoneNumberAreaCode" class="TextBox" runat="server" type="text" 
onkeyup="GoToNextTextBox(this, 3, 'cphMainArea_txtPhoneNumberFirstThree')" />

answered Mar 13, 2014 at 4:15

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

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

1 Comment

Vandel212 Over a year ago

That solved it. Thank you. Also Rex deserves credit as he was the first to give this answer.

mmeasor · Accepted Answer · 2014-03-13 04:04:25Z

0

When using master pages and user controls the rendered ID of your controls change, but there is a way to stop it.

Let's say you have a Textbox

<asp:Textbox id="txtName" runat="server"></asp:Textbox>

on a standard asp page, it's id will be as you expect, txtName Now you add a master page, called Site.Master. In your rendered html, the controls name is now different.

cntl1_Site_txtName

I might have the syntax of the new name a bit off, but you can view source and find it for yourself.

There is a way to control that though. There is a property on your page, ClientIDMode. If i remember correctly it has 3 or 4 options. Auto ID is default I believe.

If you set it to static for that page, then you will no longer get the verbose control IDs, they will be as you expect.

This can be a downfall when using things like Repeaters though. You will not have easy access to specific fields if they do not have the verbose ID

answered Mar 13, 2014 at 4:04

mmeasor

4684 silver badges20 bronze badges

1 Comment

Vinay Pratap Singh Bhadauria Over a year ago

please read the question carefully, you took yourself trouble of so much explaining but the problem is different

Collectives™ on Stack Overflow

Javascript returns undefined with asp.net master pages

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related