PDA

View Full Version : Forms and buttons and javascript

dlowery
07-31-2002, 07:12 PM
I "borrowed" some JavaScript which lets specific users log onto a Web site with name and password. Slick script with user list input box and pw input box plus 'Login' <button>. But here's the problem: I cannot get the button to activate by pressing <Enter> in the pw box....which would make things infinitely easier for the user.

What I've tried: relocating the script on the page; top, bottom, head. Using type=submit rather than type=button. "javascript: URL" (URL being check(this.form), the function we need). Tried 'onblur', 'onselect (with high optimism)', 'onclick' to move focus to the button.

The only thing I can get to work is the Tab key to move to the button, or focus with the mouse pointer. It would be real logical (and it happens in MANY other forms) to have the <Enter> key used in the pw box call the check() function.

The page listing is below. Any insight any of you may have would earn my undying gratitude! :) If you try the page you'll get a 404 error when the pw is correct. The pw, by the way, for all names on the list is 'camelot9'. It's encrypted by the script.

Dale Lowery


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/html4/loose.dtd">
<html>
<head>
<title>
Sesame
</title>
<meta http-equiv="Content-Type" content=
"text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">

<link rel="stylesheet" type="text/css" href="jk_style.css">
</head>
<body bgcolor="beige">
<center>
<form name="logform">

<br>
<br>

<table border="0" cellpadding="0" bgcolor="ivory" width=
"300" height="200">
<tr>
<td colspan="2" align="center">
<font size="+2"><b>UFJA Members Only</b></font>
</td>
</tr>
<tr>
<td width="150" align="right">
<font size="2">User name:</font><br>
Select from list
</td>
<td width="135" align="left">
<select name="memlist">
<option value='x'>
</option>
<option value='bkeft|11373|LGQGWPCS'>
bkeft
</option>
<option value='cchitty|11373|LGQGWPCS'>
cchitty
</option>
<option value='csloan|11373|LGQGWPCS'>
csloan
</option>
<option value='dbagar|11373|LGQGWPCS'>
dbagar
</option>
<option value='dkelly|11373|LGQGWPCS'>
dkelly
</option>
</select>
</td>
</tr>
<tr>
<td width="150" align="right">
<font size="2">Password:</font>
</td>
<td width="135" align="left">
<input type="password" size="10" maxlength="8"
name="pass">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="Login" name="logger" onclick="check(this.form)">
</td>
</tr>
</table>
</form>
</center>

<script type="text/javascript" language="JavaScript">
<!-- Begin
var params=new Array(4);
var alpha="ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHI";
function check(keyform) {
which=keyform.memlist.selectedIndex;
choice = keyform.memlist.options[which].value+"|";
if (choice=="x|") {
alert("Please Select Your Name From The List");
return;
}
p=0;
for (i=0;i<3;i++) {
a=choice.indexOf("|",p);
params[i]=choice.substring(a,p);
p=a+1;
}
h1=makehash(keyform.pass.value,3);
h2=makehash(keyform.pass.value,10)+" ";
if (h1!=params[1]) {
alert("Incorrect Password!"); return; };
var page="";
for (var i=0;i<8;i++) {
letter=params[2].substring(i,i+1)
ul=letter.toUpperCase();
a=alpha.indexOf(ul,0);
a-=(h2.substring(i,i+1)*1);
if (a<0) a+=26;
page+=alpha.substring(a,a+1); };
top.location=page.toLowerCase()+".html";
}
function makehash(pw,mult) {
pass=pw.toUpperCase();
hash=0;
for (i=0;i<8;i++) {
letter=pass.substring(i,i+1);
c=alpha.indexOf(letter,0)+1;
hash=hash*mult+c;
}
return(hash);
}
// End -->
</script>

</body>
</html>
x_goose_x
07-31-2002, 10:47 PM
Try replacing:

<form name="logform">

with:

<form name="logform" onSubmit="check(this.form); return false;">
dlowery
07-31-2002, 11:19 PM
Sorry, Goose! It didn't help. I think I'll check with my Astrologer next! :cool:
Roy Sinclair
08-01-2002, 03:17 AM
Originally posted by x_goose_x
Try replacing:

<form name="logform">

with:

<form name="logform" onSubmit="check(this.form); return false;">

Actually copied the code and tried it locally. As is the code submits (under Mozila 1 and IE 6) when the return key is pressed. That's easily seen by the fact that the URL will be seen sporting the user name and the password after the return key is pressed.

The problem is that the code isn't running, that's why the advice x_goose_x is correct, it causes your code to run and check the value of the password and then does a "return false" to prevent the form from being submitted.

Hitting the return key in a form (except in a Textarea) will cause the form to be submitted, since this particular script changes pages internally you want to make sure the form doesn't submit because that will override the internal page change.

Check that you did as x_goose_x told you. I tried it here and it worked.
dlowery
08-01-2002, 05:17 PM
x_goose_x and Roy Sinclair! Thanks for your efforts. Following your suggestions still does not achieve the effect that I want.

The JavaScript functions not only verify a user with a password but also REDIRECT the user to a Web page which is encrypted as the third element in the <option value="...">.

The functions work correctly in the listing I submitted but only when you click on the "Login" button.

Roy, your analysis brings some enlightenment, however, I don't think I even want the form submitted to the server...merely send the user on to another page.

The <Enter> key does cause some response...at least a flash of something in the Status Bar. That goes so fast that I have no idea what it indicates.

Also, I'm not extremely knowledgable in JS/HTML, so I have some confusion about the difference between calling a JS function from an <input type="button"> and a <form action="JS"> call. Well, the latter (as I understand it) is launched on a 'submit' event and the former would appear to be more specifically controllable. However, 'onevent' action seems to pre-empt any <Enter> activity. ?????

Again, guys, thanks for your help. I think I'll just try to look for another solution. I think I saw some promising approaches in PHP sites.