Solved

jQuery Form Controls

Posted on 2013-01-31
3
260 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
3 Comments
 
LVL 56

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

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jquery not working after div reload 4 32
CSS in HTML 5 51
Link not working 6 41
Calculating percentage 2 27
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

713 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