Simple password login

Lefty · Sep 10, 2008

I am trying to use a simple Login procedure with a form and a javascript
function on the same html page. The page works as intended on IE 6 and 7,
whereas FF2 and 3 claim that a variable (pwform) is not defined.
Can someone explain me how tofix it for FF2 and 3?
-------
<!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" xml:lang="en" lang="en">
<head>
<title>Login page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript" type="text/javascript">

</script>
<style type="text/css">
body{background:#ffffff url(img/site/bg.gif) repeat;}
table{width:300px;height:200px;border:3px solid
#cccccc;font-size:large;color:#808080;background:#eaeaea;}
..center{text-align:center;}
</style>
</head>
<body><br /><br /><br />
<div class="center">
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td class="center">
<h2>Please enter password</h2>
<form name="pwform" action="javascript:logon(pwform.pw.value)">
<input type="password" name="pw" size="20" /><br /><br />
<input type="submit" value=" Login! " />
</form>
</td>
</tr>
</table>
</div>
<script language="javascript" type="text/javascript">

</script>
</body>
</html>
-----------

Gregor Kofler · Sep 10, 2008

Lefty meinte:

I am trying to use a simple Login procedure with a form and a javascript
function on the same html page. The page works as intended on IE 6 and
7, whereas FF2 and 3 claim that a variable (pwform) is not defined.
Can someone explain me how tofix it for FF2 and 3?

[crappy code snipped]

Anyway,

document.pwform.pw.focus();

document.forms["pwform"].elements["pw"].focus();

I suppose somebody already told you that "logins" via JS are idiotic?

Gregor

Jeremy J Starcher · Sep 10, 2008

I am trying to use a simple Login procedure with a form and a javascript
function on the same html page. The page works as intended on IE 6 and
7, whereas FF2 and 3 claim that a variable (pwform) is not defined. Can
someone explain me how tofix it for FF2 and 3? -------

IE allows a non-standard "shortcutting" access to elements as you do in
this line: (IE allows a number of non-standard and sometimes trouble-
causing shortcuts. By and large, study the DOM methods.)

document.pwform.pw.focus();

The proper way to write that would be:
document.forms.pwform.pw.focus();

In addition, I've made a few other notes that will help prevent trouble
for you in the future.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Use HTML 4.01 strict doc-type. XHTML support is broken under all current
versions of IE and doesn't give any advantages.

Be sure to re-validate the page!

<html

xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<title>Login page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>

<script language="javascript" type="text/javascript">

Just use: <script type="text/javascript">

Lose this. It hasn't been needed in over a decade and if IE really did
process your page according to XHTML, it would have caused trouble.

<!--

if(top.frames.length!=0){top.location=self.document.location;} function
logon(form){
var pw=form;
if (pw != null){
location.href= 'htm/' + pw + '.htm';
}
}

// -->

While this is harmless, may as well as ditch it too.

</script>
<style type="text/css">
body{background:#ffffff url(img/site/bg.gif) repeat;}
table{width:300px;height:200px;border:3px solid
#cccccc;font-size:large;color:#808080;background:#eaeaea;}
.center{text-align:center;}
</style>
</head>
<body><br /><br /><br />
<div class="center">
<table cellpadding="0" cellspacing="0" border="1"> <tr>
<td class="center">
<h2>Please enter password</h2>
<form name="pwform" action="javascript:logon(pwform.pw.value)">

The action should always point to a NON-javascript resource.
It isn't nice to force people to use Javascript.

I would use the onSubmit property for the Javascript.

<input type="password" name="pw" size="20" /><br /><br /> <input
type="submit" value=" Login! " />
</form>
</td>
</tr>
</table>
</div>

Same comments apply here

Thomas 'PointedEars' Lahn · Sep 10, 2008

Lefty said:
I am trying to use a simple Login procedure with a form and a javascript
function on the same html page. The page works as intended on IE 6 and 7,
whereas FF2 and 3 claim that a variable (pwform) is not defined.
Can someone explain me how tofix it for FF2 and 3?

Do not use XHTML when HTML 4.01 suffices. Reasons follow below.

<head>
<title>Login page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
It can be either HTML or XHTML. For an XHTML parser, this would come way
too late: the markup has to be well-formed and so its encoding determined
*before* the document tree can begin; for that purpose, there is the
`Content-Type' HTTP header, the BOM, or a processing instruction

<script language="javascript" type="text/javascript">

The `language' attribute is deprecated and unnecessary. Remove it.

<!--

In XHTML, where the content model of the `script' element is PCDATA; this
would mean you comment out the contents of the `script' element; the parser
could leave you with an empty <script/>. In HTML it is a pseudo-comment as
the markup parser does not interpret the *CDATA* content; if the script
engine does not implement proprietary extensions, it is a plain syntax error.

And for what? Supposed compatibility with HTML 2.0-UAs that are obsolete
anyway since 8 years (as of RFC2854). Remove this.

if(top.frames.length!=0){top.location=self.document.location;}

if (window.parent != window.top)
{
window.top.location = window.location;
}

function logon(form){
var pw=form;
if (pw != null){
location.href= 'htm/' + pw + '.htm';

If you change the content document of the current window, you are destroying
its global execution context and consequently the corresponding local
execution contexts. In other words, you bite the hand that feeds you, and
the error message you have observed is the result of a race condition.

}
}

// -->

Remove this.

</script>
<style type="text/css">

In XHTML, as in any XML application, you need to refer to the style that is
applied to markup with an XML processing instruction. If you use a style
element, the style element needs an ID like

<style type="text/css" id="id">

so that you can specify

<?xml-stylesheet href="#id" type="text/css"?>

before the DOCTYPE declaration.

body{background:#ffffff url(img/site/bg.gif) repeat;}
table{width:300px;height:200px;border:3px solid
#cccccc;font-size:large;color:#808080;background:#eaeaea;}
.center{text-align:center;}

This is hardly legible.

</style>
</head>
<body><br /><br /><br />

^^^^^^^^^^^^^^^^^^
Nonsense; use CSS for margins instead.

<div class="center">

You do not need that `div' element, you can format the table
`margin:0 auto'. That is how you center block elements.

<table cellpadding="0" cellspacing="0" border="1">

Avoid mixing format attributes and CSS.

<tr>
<td class="center">
<h2>Please enter password</h2>

Where is the corresponding `h1' element (first-level heading)?
Use CSS for setting font size and weight, not structural markup.

<form name="pwform" action="javascript:logon(pwform.pw.value)">

Your form does not need a name, you can refer to it by index and property.
With the proprietary `javascript:' URI scheme, logon will not be possible
without scripting and only if this scheme is supported; bad thing.

It should be

<input type="password" name="pw" size="20" /><br /><br />

^^^^^^^^^^^^
See above.

<input type="submit" value=" Login! " />

The NBSP character should not be used for margins. Use CSS `padding' instead.

</form>
</td>
</tr>
</table>

So you have a one-row, one-column table here? You do not need this table at
all.

</div>
<script language="javascript" type="text/javascript">
<!--

See above.

document.pwform.pw.focus();

This code belongs in the `onload' event handler attribute value as

<body onload="document.forms[0].elements['pw'].focus()">

You might want to feature-test whether the object has a focus() method
before you call it. However, focusing a form control introduces an
accessibility issue as it prevents scrolling with the keyboard.

// -->

See above.

[...]

PointedEars

Thomas 'PointedEars' Lahn · Sep 10, 2008

Jeremy said:
IE allows a non-standard "shortcutting" access to elements as you do in
this line: (IE allows a number of non-standard and sometimes trouble-
causing shortcuts. By and large, study the DOM methods.)

The proper way to write that would be:
document.forms.pwform.pw.focus();

No, that could only be

document.forms.pwform.elements.pw.focus();

I would use

document.forms["pwform"].elements["pw"].focus();

though, as the ECMAScript Binding section of the DOM Level 2 HTML
Specification recommends:

<http://www.w3.org/TR/DOM-Level-2-HTML/ecma-script-binding.html>

None of this is likely to be the reason why that fails, though. Firefox
supports the proprietary referencing as well for backwards compatibility
(after all, it was JavaScript 1.0 that introduced it, when there was only
JavaScript and the Netscape 2.0 DOM [1]), both in Quirks Mode and Standards
Compliance Mode.

PointedEars
___________
[1] <http://PointedEars.de/es-matrix/#javascript>

<http://e-pla.net/documents/manuals/javascript-1.0/ref_d-e.html#elements_object>

Thomas 'PointedEars' Lahn · Sep 10, 2008

Thomas said:
Lefty said:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Click to expand...

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
It can be either HTML or XHTML. For an XHTML parser, this would come way
too late: the markup has to be well-formed and so its encoding determined
*before* the document tree can begin; [...]

----------^
building

PointedEars

Lefty · Sep 10, 2008

Thanks to all for the very constructive comments. I'll study them carefully
and hopefully I'll be able to implement them.. For now thanks again. Lefty

Thomas 'PointedEars' Lahn · Sep 10, 2008

Thomas said:
Lefty said:

<form name="pwform" action="javascript:logon(pwform.pw.value)">

Click to expand...

[...]
It should be

<form action="..." onsubmit="return logon(this.form)">

Another Password Confirmation	2	Sep 22, 2023
Password confirmation issue	5	Sep 20, 2023
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Problem in getting dashboard page from login page in python pycharm using POST command	0	Dec 24, 2022
Help with my responsive home page	2	Dec 14, 2022
Help with code	0	Jun 12, 2022
Reversing output of user input by using while loop...	2	Sep 1, 2022
Uhhhhh, What can I do next?	6	Nov 25, 2023

Simple password login

Lefty

Gregor Kofler

Jeremy J Starcher

Thomas 'PointedEars' Lahn

Thomas 'PointedEars' Lahn

Thomas 'PointedEars' Lahn

Lefty

Thomas 'PointedEars' Lahn

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads