Good morning
I have a user login form where I am checking for values in the username and password fields with javascript. If either of the values are missing I show an EO dialog with a simple message and an Okay button and then in the same javascript function I try to set focus to the field whose value is missing. The dialog pops up as expected but the .focus() does not work. If I use an alert instead of the EO dialog, everything works fine. Please see code below... problem areas are highlighted
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="UserLogin" validateRequest="false"%>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<!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 runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function validate()
{
if (document.UserLoginForm.txtUsername.value=="")
{
eo_GetObject('dlgAlert').show(true, 'Username and Password Required');
document.UserLoginForm.txtUsername.focus();
return false;
}
if (document.getElementById("<%=txtPassword.ClientID%>").value=="")
{
eo_GetObject('dlgAlert').show(true, 'Password Required');
document.UserLoginForm.txtPassword.focus();
return false;
}
return true;
}
</script><script language="javascript" type="text/javascript">
function SetFocusToUserLogin()
{
if (document.UserLoginForm.txtUsername.value=="")
{
document.UserLoginForm.txtUsername.focus();
return false;
}
if (document.UserLoginForm.txtPassword.value=="")
{
document.UserLoginForm.txtPassword.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form id="UserLoginForm" runat="server">
<asp:ScriptManager ID="UserLoginScriptManager" runat="server"></asp:ScriptManager>
<asp:HiddenField ID="hdiHiddenField" runat="server" />
<div style="padding-top: 10px; padding-bottom:10px; padding-left: 10px; padding-right:10px; width: 200px; margin-left: auto; margin-right:auto; margin-top: 100px; font-family:Arial, Sans-Serif;font-size: small; border-color:Gray; border-style:solid; border-width:1px">
<table cellpadding="2" style="border-style:None; border-color: Navy; height: 100px; position: static; margin-left: auto; margin-right:auto">
<tr>
<td style="width: 64px; text-align: right" valign="middle">
<asp:Label ID="Label2" runat="server" CssClass="LJFormLabel" Text="Username" Width="64px"></asp:Label></td>
<td style="width: 62px; text-align: left" valign="middle">
<asp:TextBox ID="txtUsername" runat="server" CssClass="FormTextBox" Width="100"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 64px; text-align: right" valign="middle">
<asp:Label ID="Label3" runat="server" CssClass="LJFormLabel" Text="Password" Width="64px"></asp:Label></td>
<td style="width: 62px; text-align: left" valign="middle">
<asp:TextBox ID="txtPassword" runat="server" CssClass="FormTextBox" TextMode="Password" Width="100px"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2" style="height: 50px; text-align: center">
<asp:CheckBox ID="chkRememberMe" runat="server" CssClass="LJFormLabel" Style="position: static"
Text="Remember Me" Width="112px" />
</td>
</tr>
<tr>
<td colspan="2" style="height: 20px; text-align: center">
<asp:Button ID="btnLogin" runat="server" Text="Login" OnClientClick=" return validate()"/></td>
</tr>
</table>
</div>
<eo:Dialog ID="dlgLocation" runat="server" BackColor="#ECE9D8" ControlSkinID="None"
HeaderHtml="Unknown Location" Height="100px" Width="320px">
<HeaderStyleActive CssText="padding-right: 3px; padding-left: 8px; font-weight: bold; font-size: 10pt; background-image: url(00020113); padding-bottom: 3px; color: white; padding-top: 0px; font-family: 'trebuchet ms';" />
<BorderImages BottomBorder="00020112" BottomLeftCorner="00020107" BottomRightCorner="00020108"
LeftBorder="00020110" RightBorder="00020111" TopBorder="00020109" TopLeftCorner="00020101"
TopLeftCornerBottom="00020103" TopLeftCornerRight="00020102" TopRightCorner="00020104"
TopRightCornerBottom="00020106" TopRightCornerLeft="00020105" />
<FooterStyleActive CssText="padding-right: 4px; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; padding-top: 4px; font-family: tahoma" />
<ContentTemplate>
<table cellpadding="2" style="border-style:None; border-color: Navy; height: 150px; position: static; margin-left: auto; margin-right:auto">
<tr>
<td style="width: 120px; height: 44px" align="center">
<asp:Label ID="lblSignInLocation" runat="server" CssClass="CJFormLabel" Height="24px"
Text="Please select the location you are logging in from" Width="200px"></asp:Label></td>
</tr>
<tr>
<td align="center" style="width: 100%; height: 45px; text-align: center">
<asp:DropDownList ID="cboLoginLocation" runat="server" CssClass="FormComboBox" Width="132px">
<asp:ListItem>Home</asp:ListItem>
<asp:ListItem>Public Access Computer</asp:ListItem>
<asp:ListItem>School</asp:ListItem>
<asp:ListItem>Work</asp:ListItem>
</asp:DropDownList></td>
</tr>
<tr>
<td align="center" style="width: 100%; height: 41px; text-align: center">
<asp:LinkButton ID="lbLoginExplanation" runat="server" BorderStyle="None" Font-Names="Arial"
Font-Size="Small" ForeColor="Blue" Width="188px" style="position: static">Why we need to know where you are logging in from</asp:LinkButton></td>
</tr>
</table>
</ContentTemplate>
<FooterTemplate>
<asp:Button ID="btnContinue" runat="server" CssClass="FormButton" Text="Continue" Width="88px" style="position: static" />
</FooterTemplate>
<ContentStyleActive CssText="padding-right: 4px; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; padding-top: 4px; font-family: tahoma" />
</eo:Dialog>
<eo:Dialog ID="dlgAlert" runat="server" BackColor="#ECE9D8" ControlSkinID="None"
HeaderHtml="Dialog Title" Height="60px" Width="250px" CancelButton="btnOK" VerticalAlign="Middle">
<HeaderStyleActive CssText="padding-right: 3px; padding-left: 8px; font-weight: bold; font-size: 10pt; background-image: url(00020113); padding-bottom: 3px; color: white; padding-top: 0px; font-family: 'trebuchet ms';" />
<BorderImages BottomBorder="00020112" BottomLeftCorner="00020107" BottomRightCorner="00020108"
LeftBorder="00020110" RightBorder="00020111" TopBorder="00020109" TopLeftCorner="00020101"
TopLeftCornerBottom="00020103" TopLeftCornerRight="00020102" TopRightCorner="00020104"
TopRightCornerBottom="00020106" TopRightCornerLeft="00020105" />
<FooterStyleActive CssText="padding-right: 4px; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; padding-top: 4px; font-family: tahoma" />
<ContentTemplate>
<table style="width: 264px">
<tr>
<td align="left" class="LJFormLabel" colspan="2" style="height: 32px; width: 300px;" valign="top">
<asp:Label ID="lblAlertMessage" runat="server" Height="39px" Text="Please enter your username and password." Width="100%"></asp:Label></td>
</tr>
<tr>
<td align="left" class="LJFormLabel" colspan="2" style="width: 300px; height: 10px;
text-align: right">
<asp:Literal ID="Literal1" runat="server" Visible="False"></asp:Literal></td>
</tr>
</table>
</ContentTemplate>
<FooterTemplate>
<asp:Button ID="btnOK" runat="server" Style="position: static" Text="Okay" Width="70px" OnClientClick=" return SetFocusToUserLogin()" />
</FooterTemplate>
<ContentStyleActive CssText="padding-right: 4px; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; padding-top: 4px; font-family: tahoma" />
</eo:Dialog>
<eo:Dialog ID="dlgRememberMe" runat="server" BackColor="#ECE9D8" ControlSkinID="None"
HeaderHtml="Remember Me Confirmation" Height="100px" Width="320px">
<HeaderStyleActive CssText="padding-right: 3px; padding-left: 8px; font-weight: bold; font-size: 10pt; background-image: url(00020113); padding-bottom: 3px; color: white; padding-top: 0px; font-family: 'trebuchet ms';" />
<BorderImages BottomBorder="00020112" BottomLeftCorner="00020107" BottomRightCorner="00020108"
LeftBorder="00020110" RightBorder="00020111" TopBorder="00020109" TopLeftCorner="00020101"
TopLeftCornerBottom="00020103" TopLeftCornerRight="00020102" TopRightCorner="00020104"
TopRightCornerBottom="00020106" TopRightCornerLeft="00020105" />
<FooterStyleActive CssText="padding-right: 4px; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; padding-top: 4px; font-family: tahoma" />
<ContentTemplate>
<table style="width: 300px">
<tr>
<td align="left" class="LJFormLabel" colspan="2" style="height: 64px">
Using Remember Me will by-pass this login screen the next time you or anyone else
access this website from this computer.</td>
</tr>
<tr>
<td align="left" class="LJFormLabel" colspan="2" style="width: 300px; height: 59px">
Are you sure you want the computer to remember you the next time you login?</td>
</tr>
</table>
</ContentTemplate>
<FooterTemplate>
<asp:Button ID="btnYes" runat="server" Style="position: static" Text="Yes" Width="70px" />
<asp:Button ID="btnNo" runat="server" Style="position: static" Text="No" Width="70px" />
</FooterTemplate>
<ContentStyleActive CssText="padding-right: 4px; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; padding-top: 4px; font-family: tahoma" />
</eo:Dialog>
<eo:Dialog ID="dlgChangePassword" runat="server" BackColor="#ECE9D8" ControlSkinID="None"
HeaderHtml="Change Password" Height="100px" Width="320px">
<HeaderStyleActive CssText="padding-right: 3px; padding-left: 8px; font-weight: bold; font-size: 10pt; background-image: url(00020113); padding-bottom: 3px; color: white; padding-top: 0px; font-family: 'trebuchet ms';" />
<BorderImages BottomBorder="00020112" BottomLeftCorner="00020107" BottomRightCorner="00020108"
LeftBorder="00020110" RightBorder="00020111" TopBorder="00020109" TopLeftCorner="00020101"
TopLeftCornerBottom="00020103" TopLeftCornerRight="00020102" TopRightCorner="00020104"
TopRightCornerBottom="00020106" TopRightCornerLeft="00020105" />
<FooterStyleActive CssText="padding-right: 4px; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; padding-top: 4px; font-family: tahoma" />
<ContentTemplate>
<table cellpadding="1" style="width: 280px">
<tr>
<td align="center" colspan="2" style="height: 29px; text-align: left">
<asp:Label ID="Label1" runat="server" CssClass="LJFormLabel" Height="24px" Text="You must change your password in order to proceed."
Width="314px"></asp:Label>
</td>
</tr>
<tr>
<td align="center" colspan="2" style="height: 35px; text-align: left">
<asp:Label ID="Label4" runat="server" CssClass="LJFormLabel" Height="24px" Text="Passwords must be at leart 8 characters long and contain a minimum of 1 number and 1 special character (i.e. ,/?*$)"
Width="314px"></asp:Label></td>
</tr>
<tr>
<td align="center" style="width: 843px; height: 24px; text-align: right">
<asp:Label ID="Label5" runat="server" CssClass="LJFormLabel" Text="New Password"
Width="90px"></asp:Label></td>
<td align="center" style="width: 225px; height: 24px; text-align: left">
<asp:TextBox ID="txtNewPassword" runat="server" CssClass="FormTextBox" TextMode="Password"></asp:TextBox></td>
</tr>
<tr>
<td align="center" style="width: 843px; height: 26px; text-align: right">
<asp:Label ID="Label6" runat="server" CssClass="LJFormLabel" Text="Re-enter Password"
Width="115px"></asp:Label></td>
<td align="center" style="width: 225px; height: 26px; text-align: left">
<asp:TextBox ID="txtConfirmedPassword" runat="server" CssClass="FormTextBox" TextMode="Password"></asp:TextBox></td>
</tr>
</table>
</ContentTemplate>
<FooterTemplate>
<asp:Button ID="btnChangePassword" runat="server" CssClass="FormButton" Text="Continue" Width="88px" style="position: static" />
</FooterTemplate>
<ContentStyleActive CssText="padding-right: 4px; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; padding-top: 4px; font-family: tahoma" />
</eo:Dialog>
<eo:Dialog ID="dlgCellExplanation" runat="server" BackColor="#ECE9D8" ControlSkinID="None"
HeaderHtml="Why we need your cell phone number" Height="216px" Width="320px" CancelButton="btnReturn">
<HeaderStyleActive CssText="padding-right: 3px; padding-left: 8px; font-weight: bold; font-size: 10pt; background-image: url(00020113); padding-bottom: 3px; color: white; padding-top: 0px; font-family: 'trebuchet ms';" />
<BorderImages BottomBorder="00020112" BottomLeftCorner="00020107" BottomRightCorner="00020108"
LeftBorder="00020110" RightBorder="00020111" TopBorder="00020109" TopLeftCorner="00020101"
TopLeftCornerBottom="00020103" TopLeftCornerRight="00020102" TopRightCorner="00020104"
TopRightCornerBottom="00020106" TopRightCornerLeft="00020105" />
<FooterStyleActive CssText="padding-right: 4px; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; padding-top: 4px; font-family: tahoma" />
<ContentStyleActive CssText="padding-right: 4px; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; padding-top: 4px; font-family: tahoma" />
<ContentTemplate>
<table style="width: 520px; position: static; height: 300px">
<tr>
<td class="LJSmallText" style="width: 100%; height: 57%; text-align: left" valign="top">
<br />
One of the greatest benefits of using a web-based application is that it allows
you to access the application from ANY computer with an internet connection.
<br />
<br />
While this is very convienent, making it possible to work from home or while on
vacation, it also makes it easier for others to break into your on-line accounts. <br />
<br />
When you login into our application for the 1st time, we will ask you where you
are working from. We will then install a 'Computer Identity' cookie on your computer
to help us identity the computer the next time you login.<br />
<br />
When you login, we verify your username and password and check to make sure you
are working from a 'known' computer.
<br />
<br />
If you login from an 'unknown' computer, you will be required to enter a PIN, which
will be sent to your cell phone (most secure method) or email address. Once you
enter the PIN, we will ask you if you'd like to add this computer as another 'known'
computer. If you do,we will once again ask you where you are working from, install
a 'Computer Identity' cookie, and add the computer to your list of 'known' computers.<br />
<br />
<strong>You will not </strong>need to go through this process <strong>unless</strong>
you log onto an unknown computer or have deleted your 'Computer Identity' cookie
from your computer.</td>
</tr>
</table>
</ContentTemplate>
<FooterTemplate>
<asp:Button ID="btnReturn" runat="server" CssClass="FormButton" Style="position: static"
Text="Return to Login" Width="130px" />
</FooterTemplate>
</eo:Dialog>
</form>
</body>
</html>