1

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!

Improve this question
6
  • 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! Commented Aug 24, 2018 at 9: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. Commented Aug 24, 2018 at 9: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. Commented Aug 24, 2018 at 9:51
  • There is a typo in your <form>, one double quote " to much. Just saying! Commented Aug 24, 2018 at 10:02
  • you try to bind an eventlistener before the dom is loaded. that's what jQuerys document ready is for! Commented Aug 24, 2018 at 11:51

4 Answers 4

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

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.
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
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.
0

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>
Improve this answer

Comments

0

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; } });
Improve this answer

Comments

0

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:

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.