Use enter to jump between webform elements

Hi,

I'm working in an asp.net environment. I wonder if it's possible, with javascript or jquery or the like, to jump between different webform elements on a webpage by using the Enter key?

For example:
Say that I have a row with a asp dropdown, two asp textboxes and a asp button. Can I then move from one to the other with the Enter key, like in an windows application?

Thanks for help!

Peter
Peter NordbergIT ManagerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

plusone3055Commented:
please take a look at this article
it contains code for what you a re looking for IE moving through elements with the enter Key using Jquery in ASP.NET

http://www.dotnetcurry.com/showarticle.aspx?ID=538
0
Peter NordbergIT ManagerAuthor Commented:
Hi,

I tried the script and it works fine with textboxes, but when I added a asp button I couldn't get it to work.

Peter
0
Julian HansenCommented:
That solution has two problems

1. It uses .bind - which is depreacted as of 1.7
2. it is not circular.

Here is an example of a circular script using .on
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  $('input:text').on('keydown', function(e) {
    if (e.which==13) {
      e.preventDefault();
      var inp = $('input:text');
      var indx = ((inp.index(this) + 1) % inp.length);
      $('input:text:eq(' + indx + ')').focus();
    }
  });
});

</script>
<style type="text/css">
</style>
</head>
<body>
  <div class="address">
    <input type="text" name="a"/>
    <input type="text" name="b"/>
    <input type="text" name="c"/>
    <input type="text" name="d"/>
    
  </div>
</body>
</html>

Open in new window

0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Julian HansenCommented:
Here is an updated sample with different types of inputs
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  $('input').on('keydown', function(e) {
    if (e.which==13) {
      e.preventDefault();
      var inp = $('input');
      var indx = ((inp.index(this) + 1) % inp.length);
      $('input:eq(' + indx + ')').focus();
    }
  });
});

</script>
<style type="text/css">
</style>
</head>
<body>
  <div class="address">
    <input type="text" name="a"/>
    <input type="text" name="b"/>
    <input type="text" name="c"/>
    <input type="text" name="d"/>
    <input type="button" name="e" />
	<input type="checkbox" name="f" value="1" />
	<input type="radio" name="g" value="No" /> No
	<input type="radio" name="g" value="Yes" /> Yes
  </div>
</body>
</html>

Open in new window

0
Julian HansenCommented:
This sample demonstrates the concept with a <textarea> in the middle of some <input>'s. Textarea is tricky because you don't want to disable the enter in the text box.  To prevent this we only pick up the enter on the input but we move the focus based on input and textarea.
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  $('input').on('keydown', function(e) {
    if (e.which==13) {
      e.preventDefault();
      var inp = $('input,textarea');
      var indx = ((inp.index(this) + 1) % inp.length);
	  inp.eq(indx).focus();
    }
  });
});

</script>
<style type="text/css">
</style>
</head>
<body>
  <div class="address">
    <input type="text" name="a"/>
    <input type="text" name="b"/>
    <input type="text" name="c"/>
    <input type="text" name="d"/>
    <input type="button" name="e" />
	<textarea name="bob"></textarea>
	<input type="checkbox" name="f" value="1" />
	<input type="radio" name="g" value="No" /> No
	<input type="radio" name="g" value="Yes" /> Yes
  </div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Peter NordbergIT ManagerAuthor Commented:
Hi and thanks for answers,

Is it also possible to tweak it so that if it is a button that is the next control when I click Enter, the click event fires on the button?

Peter
0
Julian HansenCommented:
Yes - you can put a condition in the if statement to check if it is a button like this. I have added an onclick to the <button> to show what happens when you press enter on the button.
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  $('input').on('keydown', function(e) {
    if (!$(this).is(':button') && e.which==13) {
      e.preventDefault();
      var inp = $('input,textarea');
      var indx = ((inp.index(this) + 1) % inp.length);
	  inp.eq(indx).focus();
    }
  });
});

</script>
<style type="text/css">
</style>
</head>
<body>
  <div class="address">
  <form action="index.php">
    <input type="text" name="a"/>
    <input type="text" name="b"/>
    <input type="text" name="c"/>
    <input type="text" name="d"/>
    <input type="button" name="e" onclick="alert('clicked');" />
	<textarea name="bob"></textarea>
	<input type="checkbox" name="f" value="1" />
	<input type="radio" name="g" value="No" /> No
	<input type="radio" name="g" value="Yes" /> Yes
	<textarea name="bob2"></textarea>
  </form>
  </div>
</body>
</html>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.