Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Tabindex help needed for buttons on a form

    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">&nbsp;</p>
      <p>&nbsp;</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

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    I had no problem with the code once I placed it into a html form. Here it is complete and written in modern day language:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>New document</title>
    <script type="text/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>
    
    <body>
    <div id="main_text">
    <h2 class="style3">REEL</h2>
    <p class="style1">&nbsp;</p>
    <p>&nbsp;</p>
    <form name="iaccinput" action="">
    <table border="0" style="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()" style="height: 40px;width: 50px;"><br />
    <input tabindex="4" type="reset" value=" reset " onclick="window.status=('reset: please enter your client name and password.')" style="width: 50px;">
    </td></tr></table>
    </form>
    </div>
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    http://www.mlschmidt.com/test/password.html

    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:

    http://www.mlschmidt.com/test/noworky.html

    Thanks again for your help.

    I hope we can figure this out.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    I posted your code and it did not work.
    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.

    Check out new body:

    Code:
    <body>
    <div id="main_text">
    <h2 class="style3">REEL</h2>
    <p class="style1">&nbsp;</p>
    <p>&nbsp;</p>
    <form name="iAccInput" action="View_One_Table.php" method="post">
    <table border="0" style="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()" style="height: 40px;width: 50px;"><br>
    <input tabindex="4" type="RESET" value=" Reset " onClick="window.status=('RESET: Please enter your CLIENT NAME and PASSWORD.')" style="width: 50px;">
    </td></tr></table>
    </form>
    </div>
    </body>
    </html>

  • #6
    New to the CF scene
    Join Date
    May 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey sunfighter,

    Thanks for taking a second stab at this, but again, it's not working.

    I pasted your code directly into my page (admittedly, I made one alteration to the "login" button, the height) and this is what it looks like:

    http://www.mlschmidt.com/test/password20120504.html

    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.

    I really appreciate your help and input. Thanks!

  • #7
    New to the CF scene
    Join Date
    May 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey felgall,

    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.

    Thanks for your help!

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    I just went to your link http://www.mlschmidt.com/test/password20120504.html and the tabs and the site are working for me in firefox, IE, Chrome, and Opera. Think the problem is on your side.

  • #9
    New to the CF scene
    Join Date
    May 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for checking. I appreciate it.

    What OS are you running? What version of browsers?

  • #10
    New to the CF scene
    Join Date
    May 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm running Mac OS 10.4.11. Safari 4.1. Firefox 3.6.28.

  • #11
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    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.

  • #12
    New to the CF scene
    Join Date
    May 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Good to hear its working on your PC. It doesn't seem to be working on a Mac. Any ideas, anyone?

  • #13
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Found this:
    By default, the Mac OS X behavior for tabbing through form fields is different than that of Windows and Linux.
    http://technosophos.com/node/95
    AND here
    http://www.tonyspencer.com/2006/05/0...-mac-browsers/

  • #14
    New to the CF scene
    Join Date
    May 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    I'm looking around, but got any ideas?

    Thanks again!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •