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 4 of 4

Thread: Forms help

  1. #1
    New Coder
    Join Date
    Mar 2004
    Posts
    95
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Forms help

    I have a php page that takes input from a form and adds it to a mysql database. At the moment if you type into one of the input test boxes and press "Enter" it submits the form. How can I stop this happening.

    Is there some way of making focus go to the next box when "Enter" is pressed?

    Any hints, tips would be appreciated.

  • #2
    Super Moderator
    Join Date
    May 2002
    Location
    Perth Australia
    Posts
    4,058
    Thanks
    10
    Thanked 96 Times in 94 Posts
    not a PHP question , moving to ....errr probably javascript.
    resistance is...

    MVC is the current buzz in web application architectures. It comes from event-driven desktop application design and doesn't fit into web application design very well. But luckily nobody really knows what MVC means, so we can call our presentation layer separation mechanism MVC and move on. (Rasmus Lerdorf)

  • #3
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There are more elegant ways of doing this, of course, but this works:

    Code:
    <html>
    <head>
    <title></title>
    <script type="text/javascript">
    function handleKeyPress (e, nextField)  {
        if (((e && e.which) ? e.which : window.event.keyCode) != 13) {
            // keyCode for enter is 13 - all other keys can pass right on by
            return true;
        }
        if (nextField) {
            nextField.focus();
        }
        return false;
    }
    function validateForm (e, form) {
        if (!e || !form) {
            return false;
        }
        // ... client-side validation ...
        // form.submit() doesn't call the form's onsubmit handler
        form.submit();
        // just for clarity
        return false;
    }
    </script>
    </head>
    <body>
    <form onsubmit="return false;">
    <input type="text" name="field1" onkeypress="return handleKeyPress(event, this.form.elements['field2']);" />
    <input type="text" name="field2" onkeypress="return handleKeyPress(event, this.form.elements['field3']);" />
    <input type="text" name="field3" onkeypress="return handleKeyPress(event, this.form.elements['field4']);" />
    <input type="text" name="field4" onkeypress="return handleKeyPress(event, this.form.elements['field5']);" />
    <input type="text" name="field5" onkeypress="return handleKeyPress(event, this.form.elements['field6']);" />
    <input type="text" name="field6" onkeypress="return handleKeyPress(event, this.form.elements['field1']);" />
    <input type="submit" onclick="return validateForm(event, this.form);" />
    </form>
    </body>
    </html>
    The important parts: you've got to return false on submit, and specify which field you want to focus on. Put your validation script in where the comment is, and you're good to go.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It is HIGHLY recommended that you do not alter the normal command interface that users have come to expect.

    The answer however is here:
    capturing the "Enter" event
    Check out the Forum Search. It's the short path to getting great results from this forum.


  •  

    Posting Permissions

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