Aaargh. I've written a simple HTML page with a form on it to take in a phone number. I put in a Javascript function that makes the focus jump to the next form box once it's full. Everything seems perfect.However, for some reason it is not working. I can't see why since I've created a nearly identical file with only the form and the function and it works! So something in this particular file is blocking it but after 30 minutes of tinkering I can't figure out what.\[code\]<html> <head> <script type="text/javascript"> function moveToNext(curr, next) { if(curr.value.length == curr.getAttribute("maxlength")) next.focus(); } </script> <title> Enter Phone Number </title> <style type="text/css"> #content { background:url(images/content-bg-rpt.gif) repeat; margin: 0 auto; height: 300px; width: 500px; } #formArea { margin-top: 50px; width: 250px; margin-left: auto; margin-right: auto; } #submit { position: relative; } .formInput { /* These are the input styles used in forms */ background: #f7f7f7 url(../img/input.gif) repeat-x; border: 1px solid #d0d0d0; margin-bottom: 6px; color: #5f6c70; font-size: 16px; font-weight: bold; padding-top: 11px; padding-bottom: 11px; padding-left: 11px; } </style> </head> <body> <div id="container"> <div id="content"> <div id="formArea"> <form name="enterPhone" id="enterPhone" action="phoneresult.php" method="GET"> <input onkeyup="moveToNext(this, document.enterPhone.d345.formInput))" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"></input> <input onkeyup="moveToNext(this, document.enterPhone.d345))" type="text" name="d345" class="formInput" maxlength="3" size="3" id="d345"></input> <input type="text" class="formInput" maxlength="4" size="4" name="d6789"></input> <input id="submit" value="http://stackoverflow.com/questions/15858188/Enter" type="submit"></input> </form> </div> </div> </div> </body> </html>\[/code\]
Javascript function to focus() on next form element not working
- Thread starter Cheawebe
- Start date