jQuery: How to use modifier keys on form submit?

Say I have a form that looks like this:

[ Animal name input field ] Add button

If I type a name and hit enter, an animal with the given name is added to a table. Works fine. What I would like now is to call the current way of working "quick add" and add a new feature called "slow add", which I am not quite sure how to do. Basically what I want is that if for example the shift key is held down when enter or the button is clicked, I want the form submit method to do something slightly different. In my case I want it to open up a form where more details on the animal can be added before it is added to the table.

Problem is I'm not quite sure how to do this. I have tried add a FireBug console.info(eventData) in my current submit function and I have found that the eventData contains an altKey, shiftKey and controlKey property, but they are always undefined even when I hold those keys down.

So, does anyone know how I can do something special in my submit handler when certain modifier keys were pressed when the form was submitted?

Temporary solution

Ended up ignoring the submit-button-shift-click-feature and instead just have the quick add feature as shift-enter-in-input-fields. Implemented it something like this:

$('#new-task')
    .submit(onNewAnimal)
    .keypress(onNewAnimal);


function onNewAnimal(event)
{
    if(event.type == 'keypress' && event.which != 13)
        return true;

    if(event.shiftKey)
    {
        // Quick add
    }
    else
    {
        // Open slow add dialog
    }

    return false;
}

Still curious if there is a better way, but until then, this is what I have. Maybe it can help someone else as well :)

You may get shift pressed by $(document).keyup and $(document).keydown events. For example my code for control key is

$(document).keyup(function (e) {
    if (e.which == 17) $.isCtrl=false;
}).keydown(function (e) {
    if (e.which == 17) $.isCtrl=true;
});

And just check

if ($.isCtrl) { ... }

in your handler

For some reason, the modifier keys aren't sent with form submits or input buttons, but they are sent on other 'click's, including input[type=image]'s. So, re-create your form using a input[type=image] where your 'Add Button' is now. You could also just use a styled A-element if you wish. The benefit here is that you can pretty much make it look just like a button and not have to rely on images.

Combine this with the keypress solution you posed in your question and you should get the whole thing you're after.

Working demo here: http://jsfiddle.net/mkoistinen/afPHh/

There is easier way. On every keydown you have built in event variable:

    {
originalEvent: [object KeyboardEvent],
type: keydown,
timeStamp: 1277147610854,
jQuery1277147575359: true,
which: 65,
wheelDelta: undefined,
view: [object DOMWindow],
toElement: undefined,
target: ,
srcElement: ,
shiftKey: false,
screenY: undefined,
screenX: undefined,
relatedTarget: undefined,
relatedNode: undefined,
prevValue: undefined,
pageY: 0,
pageX: 0,
originalTarget: undefined,
offsetY: undefined,
offsetX: undefined,
newValue: undefined,
metaKey: false,
layerY: 0,
layerX: 0,
keyCode: 65,
handler: function (event) {
  if (event.keyCode == '13') {
     event.preventDefault();
   }
   xTriggered++;
   var msg = 'Handler for .keydown() called ' + xTriggered + ' time(s).';
  $.print(msg, 'html');
  $.print(event);
},
fromElement: undefined,
eventPhase: 2,
detail: 0,
data: undefined,
currentTarget: ,
ctrlKey: false,
clientY: undefined,
clientX: undefined,
charCode: 0,
cancelable: true,
button: undefined,
bubbles: true,
attrName: undefined,
attrChange: undefined,
altKey: false,
handleObj: [object Object],
preventDefault: function (){this.isDefaultPrevented=Z;var a=this.originalEvent;if(a){a.preventDefault&&a.preventDefault();a.returnValue=false}},
stopPropagation: function (){this.isPropagationStopped=Z;var a=this.originalEvent;if(a){a.stopPropagation&&a.stopPropagation();a.cancelBubble=true}},
stopImmediatePropagation: function (){this.isImmediatePropagationStopped=Z;this.stopPropagation()},
isDefaultPrevented: function Y(){return false},
isPropagationStopped: function Y(){return false},
isImmediatePropagationStopped: function Y(){return false}
}