Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

jQuery Form Controls

Posted on 2013-01-31
3
Medium Priority
?
273 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 60

Assisted Solution

by:Julian Hansen
Julian Hansen earned 750 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 750 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

Technology Partners: 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!

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

971 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