Solved

Use enter to jump between webform elements

Posted on 2014-03-04
7
327 Views
Last Modified: 2014-03-18
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
0
Comment
Question by:peternordberg
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
7 Comments
 
LVL 22

Expert Comment

by:plusone3055
ID: 39903270
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
 

Author Comment

by:peternordberg
ID: 39903339
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
 
LVL 57

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
ID: 39903352
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 57

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
ID: 39903358
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
 
LVL 57

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39903376
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
 

Author Comment

by:peternordberg
ID: 39903533
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
 
LVL 57

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
ID: 39903790
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

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question