I am having difficulty using the "tab" key to navigate the buttons on a password form I am building for my site.
I found a beautiful piece of code, which works wonderfully, with the exception that I cannot tab to the "login" or "reset" buttons on the form. Tabbing through the fillable input fields works fine, but tabbing to the buttons does not work. Also, the "login" button does not function on a "return" keypress.
I have tried using the "tabindex" attribute, and while this works for the input fields, it does not have any effect on the "Login" or "Reset" buttons. I have tried changing the input type from "login" to "submit", and I have tried changing "onclick" to "onsubmit" (or "onkeypress"), but with these changes, the code doesn't function properly. The "return" key might function, but then the code does not. Never both at the same time.
I have searched all over the web for a solution to no avail. I must admit I am fairly new to html and I do not have the know-how to overhaul the code I'm working with, so I'm asking for help. Does anybody have a solution to my problem?
I want to use the below code, but be able to tab through the input fields, the "login" and "reset" buttons and have these buttons function on a "return" keypress.
Here's the code:
Code:
<!--
<SCRIPT LANGUAGE="JavaScript">
//---------------------------------
//LOGIN SCRIPT BY ALEX KEENE 1997
//INFO@FIRSTSOUND.COM
//---------------------------------
function Getstats()
{
window.status=('Attempting to Login to user area.')
var AccId;
var iName;
AccId = document.iAccInput.iAccID.value
iName = document.iAccInput.iName.value
if (AccId == "" || iName == "")
{
alert('\nERROR\nYou must enter ALL Details,\nto View your statistics.\n');
window.status=('Missing data or Invalid. Check spelling and Ensure Names are in Correct Case.')
}
else
{
var location=("pw" + iName + AccId + ".html");
this.location.href = location;
window.status=(' Verifying: ' + iName + '-' + AccId + ' Please wait........');
}
}
</SCRIPT>
</HEAD>
<div id="main_text">
<h2 class="style3">REEL</h2>
<p class="style1"> </p>
<p> </p>
<FORM NAME="iAccInput">
<LEFT>
<TABLE BORDER="0" border-color=#000000>
<TR>
<TD ALIGN="RIGHT" class="style1"><p>Client Name:<br />
Password:</p></TD>
<TD><INPUT tabindex="1" TYPE="TEXT" NAME="iName" MAXLENGTH="15"><br />
<input tabindex="2" type="password" NAME="iAccID" MAXLENGTH="15"></TD>
<TD><input tabindex="3" TYPE="button" VALUE=" Login " onClick="Getstats()" HEIGHT="40" WIDTH="50"><BR />
<input tabindex="4" TYPE="RESET" VALUE=" Reset " onClick="window.status=('RESET: Please enter your CLIENT NAME and PASSWORD.')" WIDTH="50">
</TD></TR></TABLE></LEFT>
<form/>
-->
Again, I want to be able to tab through the input fields, the "login" and "reset" buttons and have these buttons function on a "return" keypress. There's gotta be a way. Please help!
Thanks!
Michael
Last edited by VIPStephan; 05-03-2012 at 07:32 PM..
Reason: added code BB tags
Thanks for the reply Sunfighter, but unfortunately this did not work.
Are you sure you can tab through the input fields and the buttons on your version of the code? I posted your code and it did not work.
I want to be able to tab through all the input fields, and also the buttons, so I can tab to the "Login" button and hit return and enter the next page. Ideally, I would just tab through the input fields, fill them in and hit enter, without having to tab to the "Login" button.
You can see a sample of the page in action (and get my complete code) here:
Type in client name: "hello" password "there", no quotes, and you will advance to the next page. Again, you unfortunately cannot hit return to advance to the page. This is the problem I'm trying to solve.
I should also mention that I'm work on a Mac OS 10.4.11 and doing my testing in Safari 4.1.3, Firefox 3.6.28 and my iPhone with iOS 5.1. I don't think this should alter tab functioning, but I put it out there, because I'm a little new to html.
Also, I should mention that in your code, not only did the tabs not function, but the "Login" button failed to execute the command in the code. I don't know why this is, but I'm posting an example here:
You don't need to specify tabindex values if you just want to be able to tab through the fields in the same order they appear in the source - that's the default order.
You only need to use tabindex if the logical order to display on the screen is different from the source order.
That's still extremely old code. Modern browsers ignore window.status() because its main use is to trick people into thinking that virus links go to legitimate pages.
Simply checking if the fields are empty in the validation is also pointless as a single space is sufficient to pass that validation.
The reset button died out about 10 or so years ago because it makes it harder rather than easier to fill out forms (accidentally triggering reset wipes out everything typed so far and accidentally triggering it is far more common than actually needing to use it).
That meaningless table in the code could also be part of the cause of the problem. Your form isn't tabular data and so doesn't belong in a table. Table content is treated differently to content outside of tables and not everything works as expected inside tables.
Pressing enter when any field inside the form has the focus should submit the form. The actual submit button is only needed for people using a mouse to have a way to submit the form.
Yes, Unfortunately I set everything in the <body> to lowercase. That caused it not go to your next page. But I was only checking the tabs which does work. So tabbing is not a problem with code.
It looks fine, and I can tab through the input fields as before, but I still cannot tab through the buttons. And a "return" does not function the script. I still must click on the button.
I don't know what I'm doing wrong.
Can you follow this link and confirm that you can tab through the buttons, and that hitting "return" works without a click? On my machine, I cannot. And again, I'm at a loss for what I'm doing wrong.
Thanks for the note. Surely, this is some old code, and I know some of this scripting is antiquated. But the concept behind the code is really terrific for someone who wants a relatively simple password protection for specific pages on their personal site.
The only problem for me is that the tabbing does not appear to be working properly. And while I'm pretty resourceful researcher, I have not found a solution that works, i.e. both the tabbing and the script work at the same time.
As I am relatively new to html, and I haven't been able to find a solution online, I posted here to find an answer.
It would be a great help to me if you might be able to tell me how I can redraft this code to function properly using current coding.
All mine was on windows XP latest version of all browsers. FF ver 12.0
P.S. One last thought on this: Have you tried just running the bare code I gave you without all the extra code on the website? Some thing in that extra code maybe messing you up.
Last edited by sunfighter; 05-05-2012 at 07:31 PM..
Thanks for the info, sunfighter. It's good to know.
The crazy thing is, I know I've tabbed through other forms on my Mac, so there has to be a way to configure the code to force a Mac to function like a PC.
Before you post, read our: 
Tabindex help needed for buttons on a form
