How to move from one inputbox to another with the same class using enter

Question

I'll start by saying I'm fairly new to javascript, jquery, and php. Although I'm more familiar with PHP than the other 2 I'm still just a beginner. So I'm trying to make this HTML form for work where people can submit short remarks.

My goal is that the people using it can switch between input boxes using enter but only the specific input boxes that have the same class. Otherwise, the form can be submitted by pressing enter. (no submit button will be present).

Here's my HTML (just a tryout, not the real thing yet)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01     Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title> Help </title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("input").bind("keydown", function(event) {
if (event.which === 13) {
    alert("asd");
    event.stopPropagation();
    event.preventDefault();
   $(':input:eq(' + ($(':input').index(this) + 1) +')').focus();
  }
});
</script>
</head>
<body>
<h3> welcome to the help page </h3>

 <form  action= "Helppage.php" method="post" ">

            <p><b> name: </b></br>
            <input class= "code" type="text" name="name" size= "20" ></p>
            <p><b> location: </b> </br>
            <input class= "code" type= "text" name="location" size= "20" >  </p>
            <p><b> message:</b></br>
            <input class= "code" type= "text" name="message"size= "20" ></p>
            <p><b> remark:</b></br>
            <input  type= "text" name="remark"size= "20" ></p>
            <p><b> department:</b></br>
            <input  type= "text" name="department"size= "20" ></p>

      </form>
 <h3> thanks for participating!!</h3>



</body>
</html>

I've already tried to find a solution. Like this one: How to use enter key to focus into next input and this: Activating next input field in form on enter

But for some reason, I can't seem to get any of them to work...

Thanks in advance!

You've linked to similar question with a working answer, yet didn't tell us why/what in your implementation didn't work. Please show your implementation, otherwise we cannot really help! — Jeff, Aug 24 '18 at 09:35
Use the code from your first link, but use `$("input")` instead of `"$("input,select")` and change your HTML to lower case while you're at it. — AmmoPT, Aug 24 '18 at 09:35
So I've added the code used in one of the examples I've given. But I can't seem to figure out how to let it go through the boxes having the same class. It just.... submits the form :s. — BoyanL, Aug 24 '18 at 09:51
There is a typo in your `
`, one double quote `"` to much. Just saying! — Ronnie Oosting, Aug 24 '18 at 10:02
you try to bind an eventlistener _before_ the dom is loaded. that's what jQuerys [document ready](http://learn.jquery.com/using-jquery-core/document-ready/) is for! — Jeff, Aug 24 '18 at 11:51
Well thank you all for the good advice and help. For some reason the code just doesn't do anything or it just submits my form. I'll try to figure some stuff out with the answers you guys gave me (like putting the script on the bottom of my page etc). Thx alot :). — BoyanL, Aug 24 '18 at 12:19

score 0 · Answer 1 · answered Aug 24 '18 at 09:41

0

Well generally in HTMl you can go next by tab button. Definie tab index to every form element.

<input type="text" tabindex="1" />
<input type="text" tabindex="2" />
<input type="text" tabindex="3" />

If you want to do same on Enter button you can do this in jquery/javascript as suggested in your links. In HTML Enter means submit the form.

answered Aug 24 '18 at 09:41

amku91

1,010
11
21

1

While this will work, tabindex is often used for accessible navigation and you might end up overriding other tabindexes that are being used for navigating a web page or site. – Fergal Andrews Aug 24 '18 at 09:49
Tabindex not override. This happen due to browser. The browser will use the tabindex you specify, but after that tabbing will cycle through everything else. It's gonna happen with any button until you are not binding each specially. @FergalAndrews – amku91 Aug 24 '18 at 09:57
1

I think you are misunderstanding my comment amku91 which I could have explained better :-). A lot of screen readers for accessibility use tabindex. If you specify other functionality for a tabindex you might override the commands for the screen reader. This could also apply if another developer had added tabindexes to the navigation for accessibility reasons. – Fergal Andrews Aug 24 '18 at 10:08

TAHA SULTAN TEMURI · Answer 2 · 2018-08-24T09:53:07.600

Referring to this,thanks to him

<!DOCTYPE html>
 <html>
<body >
 <h3> Welcome to the help page </h3>

  <FORM  ACTION= "Helppage.php" METHOD="POST"">

        <p><b> Name: </b></br>
        <input class="code" type="text" name="Name" size= "20" /></p>
        <p><b> Location: </b> </br>
        <input class= "code" type= "text" name="Location" size= "20"/> </p>
        <p><b> Message:</b></br>
        <INPUT CLASS= "code" TYPE= "text" NAME="Message"SIZE= "20" /></p>
        <p><b> Remark:</b></br>
        <INPUT  TYPE= "text" NAME="Remark"SIZE= "20" /></p>
        <p><b> Department:</b></br>
        <INPUT  TYPE= "text" NAME="Department"SIZE= "20" /></p>

  </FORM>
 <h3> Thanks for participating!!</h3>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
 </script>
 <script>
  $("input").change(function() {
  var inputs = $(this).closest('form').find(':input');
   inputs.eq( inputs.index(this)+ 1 ).focus();
  });

 </script>

 </body>
 </html>

score 0 · Answer 3 · answered Aug 24 '18 at 09:56

Try this code

    $('.code').keydown(function(e){
        if(e.keyCode==13){
            var len=$('.code').length;
            var index=$('.code').index(this);
            index++;
            if(index==len)
                index=0;
            $('.code:eq('+index+')').focus();
            return false;
        }
    });

Ronnie Oosting · Answer 4 · 2018-08-24T10:24:36.553

You placed your script on the wrong place.

I suggest to add your <script> (with function) on the bottom of your page (read </body>). That will become:

<html>

<head>
    <title> Help </title>
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script> <!-- 1.3.2, really? That is quite old! :-D -->
</head>
<body>
<h3> welcome to the help page </h3>

<form action="formuliergastenboek.php" method="post">

<p><b> name: </b></br>
    <input class="code" type="text" name="name" size="20"></p>
<p><b> location: </b> </br>
    <input class="code" type="text" name="location" size="20"></p>
<p><b> message:</b></br>
    <input class="code" type="text" name="message" size="20"></p>
<p><b> remark:</b></br>
    <input type="text" name="remark" size="20"></p>
<p><b> department:</b></br>
    <input type="text" name="department" size="20"></p>

</form>
<h3> thanks for participating!!</h3>

<script type="text/javascript">
    $("input").bind("keydown", function(event) {
        if (event.which === 13) {
            alert("asd");
            event.stopPropagation();
            event.preventDefault();
            $(':input:eq(' + ($(':input').index(this) + 1) + ')').focus();
        }
    });
</script>

</body>
</html>

Documentation:

https://www.w3schools.com/js/js_whereto.asp

How to move from one inputbox to another with the same class using enter

4 Answers4