Javascript error: Cannot read property 'txtAlias' of undefined http://localhost/Test.aspx
I recently upgraded my C# ASP.Net 4.0 application from Windows 2003 IIS 6 to Windows 2008 IIS 7 and some of my Javascript does not respond, which works with Windows 2003 & IIS6. At the simple example below, I get the following Javascript error:
"TypeError: Cannot read property 'txtAlias' of undefined [http://localhost:61003/Sabbat/Test.aspx:10]
The logic is simple. When you fill in the FirstName and LastName, the Alias field should display FirstName + LastName.
Fyi, I am using Integrated mode in IIS 7 and I tested on two machines with Win 2008 and IIS 7 and get the same error. It works fine on my Win 2003 & IIS 6 server. I have no idea what is causing this and I already spent 5 hours on 开发者_运维问答this trying to find a solution. If anyone can help, that will save me some of my hair :)
Btw, the web.config I use is the default of the one generated when you create a web app. Thank you ahead!!!
<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
function onFocusAlias() {
document.Form1.txtAlias.value = document.Form1.txtFirstName.value + " " + document.Form1.txtLastName.value;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
First Name <asp:TextBox ID="txtFirstName" Runat="server" MaxLength="50" /></td>
<td>
Last Name <asp:TextBox ID="txtLastName" Runat="server" MaxLength="50" /></td>
<td>
Alias <asp:TextBox ID="txtAlias" Runat="server" MaxLength="100" Width="208px" onfocus="onFocusAlias();" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
The server version shouldn't affect the JavaScript (since that's all handled in the browser on the client), but if there were changes to the .NET engine then I suppose it may be rendering different HTML to the browser.
The first thing I notice is that the form tag's id attribute is "form1" and the JavaScript is referencing "Form1". The different case may be the culprit. It's certainly worth matching it up just for consistency and to eliminate that as a potential fault.
Additionally, and this is where my JavaScript is a little fuzzy, when you reference document.Form1 in the JavaScript is it identifying the element by its id attribute or by its name attribute? I'm honestly not sure. But if it's the latter than it's possible that the .NET engine isn't adding a name attribute where it previously did.
Ultimately, what does the rendered HTML look like? Because that's where the rubber meets the road with JavaScript, not at the server level.
Changing id to name will do, but better yet, use jQuery and do this:
function onFocusAlias()
{
$('#txtAlias').val($('#txtFirstName').val() + " " + $('#txtLastName').val();
}
Here's a non-jQuery version without changing the markup:
function onFocusAlias()
{
document.getElementById('txtAlias').value = document.getElementById('txtFirstName').value + " " + document.getElementById('txtLastName').value;
}
JavaScript is case-sensitive. You're referencing document.Form1, but the form element has an ID of form1. In the markup you've shown, document.Form1 is undefined.
You could try something of the form:
document.getElementById('txtAlias').value = 123;
just as a test.
加载中,请稍侯......
精彩评论