CODEWITHSUNDEEP
javascripthtmlforms
CodyBugstein
CodyBugstein

Reputation: 23302

Javascript function to focus() on next form element not working

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.

<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="Enter" type="submit"></input>
                        </form>
                    </div>
                </div>
            </div>
        </body>

    </html>

Upvotes: 2

Views: 2729

Answers (4)

Vinalynn
Vinalynn

Reputation: 11

try this, replace three input tags with the code below:

<input onkeyup="moveToNext(this, document.enterPhone.d345)" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"></input>
<input onkeyup="moveToNext(this, document.enterPhone.d6789)" type="text" name="d345" class="formInput" maxlength="3" size="3"  id="d345"></input>
<input type="text" class="formInput" maxlength="4" size="4" name="d6789" id="d6789"></input>

Upvotes: 0

fletch
fletch

Reputation: 1641

Try giving this a shot:

JS

function moveToNext(curr, next) {
    if (curr.value.length >= curr.maxLength) {
        document.getElementById(next).focus();
    }
}

HTML

<form name="enterPhone" id="enterPhone" action="phoneresult.php" method="GET">
    <input onkeyup="moveToNext(this, 'd345')" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"/>
    <input onkeyup="moveToNext(this, 'd6789')" type="text" name="d345" class="formInput" maxlength="3" size="3" id="d345"/>
    <input type="text" class="formInput" maxlength="4" size="4" name="d6789" id="d6789"/>
    <input id="submit" value="Enter" type="submit"/>
</form>

http://jsfiddle.net/JZxPR/

Upvotes: 0

Zach Rattner
Zach Rattner

Reputation: 21323

Two things:

  1. For each opening parenthesis, you need exactly one closing parenthesis. The onkeyup attribute of your inputs has two closing parentheses and one opening one.
  2. Pass the HTML element directly, not .formInput.

This solves both issues for me:

<input onkeyup="moveToNext(this, document.enterPhone.d345)" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"></input>
<input onkeyup="moveToNext(this, document.enterPhone.d6789)" type="text" name="d345" class="formInput" maxlength="3" size="3"  id="d345"></input>

Upvotes: 1

j08691
j08691

Reputation: 207861

Fixed your code with this jsFiddle example

HTML

<div id="container">
    <div id="content">
        <div id="formArea">
            <form name="enterPhone" id="enterPhone" action="phoneresult.php" method="GET">
                <input onkeyup="moveToNext(this, document.getElementsByName('d345'))" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"></input>
                <input onkeyup="moveToNext(this, document.getElementsByName('d6789'))" 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="Enter" type="submit"></input>
            </form>
        </div>
    </div>
</div>

JavaScript

function moveToNext(curr, next) {
    if (curr.value.length == parseInt(curr.getAttribute("maxlength"), 10)) next[0].focus();
}

In your JS you were making a comparison between an integer and a string (curr.value.length == curr.getAttribute("maxlength")). In your HTML you weren't selecting the element properly with document.enterPhone.d345.formInput.

Upvotes: 0

Related Questions