Solved

jQuery Form Controls

Posted on 2013-01-31
3
267 Views
Last Modified: 2013-02-01
Hey guys

I need some help with a form that I'm trying to create, with some jQuery controls in place.

The form is laid out in a table gird, with a mixture of <input> and <select> fields.

Some of the <input>'s are using jQuery UI autocomplete, others don't.

I have added arrow key navigation to the sheet, so that users can use the up, down, left, right keys to move to different cells (which is turned off when the autocomplete list is open to let people move up and down in the dropdown list).

The controls that I would like to add are:

1) Enter key - From a data entry stand point, I find the enter key a good way to traverse the different fields in the form.  I would like to have this functionality, without the form submission tied to the enter key (without breaking autocomplete).

2) Form select - Since we are hopefully removing form submission from the enter key, I would like to have a button and/or keyboard combination that submits the form (preferable both, with the obvious choice for the key combo of CTRL-S

Can you please help me.

Thanks
0
Comment
Question by:srfreemaninc
[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
3 Comments
 
LVL 58

Assisted Solution

by:Julian Hansen
Julian Hansen earned 250 total points
ID: 38840433
You will have to capture the keypress event and then check to see what control the event was triggered from. Set a flag if the submit button / control was the origin of the event.

Use a submit handler to trap the submit - if the flag is not set then don't allow the submit to continue (return false / event.preventDefault)
0
 
LVL 11

Accepted Solution

by:
mcnute earned 250 total points
ID: 38840541
You can trigger the enter press by this line of jquery:

$.trigger({ type: 'keypress', which: keycode });

Open in new window


Here are a list of keycodes: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
0
 

Author Closing Comment

by:srfreemaninc
ID: 38845608
Thanks guys for the help.  Got something working, still need to tweak a few things.
0

Featured Post

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses

617 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