Keyboard submit via jQuery

Question

llo, I have a form that has two submit buttons: one accept and one cancel:

<p>
 <input type="submit" name="accio" value="accept" class="default" />
 <input type="submit" name="accio" value="cancel" class="cancel" />
</p>

I want to submit the form with jQuery using the keyboard:

$(document).ready(function() {
 $("input[type=text]").focus();
 $("input[type=text]").keydown(function(e) {
 if ((e.keycode && e.keycode == 13) || (e.which && e.which == 13)) {
 $(".default").submit();
 }
 if ((e.keycode && e.keycode == 27) || (e.which && e.which == 27)) {
 $(".cancel").submit();
 }
 });
});

and I want the parameter accio to contain accept or cancel depending on the key pressed (I process it in the server)... It works in Firefox, but not in IE nor in Chrome. Where's my fault?

Update

Following @Sime's I got the following code:

$(document).ready(function() {
 $("input:text").focus();
 $("input:text").keydown(function(e) {
 if (e.which == 13) {
 $("#default").submit();
 }
 if (e.which == 27) {
 $("#cancel").submit();
 }
 });
});

but it's still not working... I think it's with the way I submit the form... Can't I call the submit method on a "input:submit" and expect that the correct values are passed on to the controller?

• Šime Vidas: @Charles Better: input:text
• Šime Vidas: @Charles Also, you don't have to do these tests on the event object. jQuery makes sure that e.which is available.
• Šime Vidas: @Charles Also, are you sure that you want to submit a whole class of objects?
• Carles Company: I thought id made funny things with the submitted value... I'll try and change that and remove my tests on e.which... Thanks.
• Šime Vidas: @Carles The submit() method works on FORM elements. You are trying to call it on the buttons.

Answer 1

try this:

$("input[type=text]").keydown(function(e) {
 if ((e.keycode && e.keycode == 13) || (e.which && e.which == 13)) {
 $(".default")[0].click();
 }
 if ((e.keycode && e.keycode == 27) || (e.which && e.which == 27)) {
 $(".cancel")[0].click();
 }
});

could you put a way to better identify the buttons.

$("p input.cancel")

UPDATE:

$(document).ready(function() {
 $("input:text").focus();
 $("input:text").keydown(function(e) {
 if (e.which == 13) {
 $("#default")[0].click();
 }
 if (e.which == 27) {
 $("#cancel")[0].click();
 }
 });
});

see this example

UPDATE II

this code functiona well in IE6 +, the correction is in the stopPropagation

$('input[type="text"]').keydown(function(ev) {
 if (ev.which == 13 || ev.which == 27) {
 ev.stopPropagation();
 if (ev.which == 13)
 $("#default")[0].click();
 if (ev.which == 27)
 $("#cancel")[0].click();
 return false
 }
});

• Carles Company: Still not working... I get null for the accio parameter in the first case (enter pressed) and the form clears it's values, but nothing is submitted in the second case (escape key). Thanks.
• Rob: This should work. As mentioned above, you can just use e.which (jQuery makes sure it's there). JSFiddle: jsfiddle.net/Uv79u/1
• andres descalzo: With jQuery you should use "which", as it takes to support every browser in this way if (event.which == null & & (event.charCode! = null | | event.keyCode! = null)) { event.which = event.charCode! = null? event.charCode: event.keyCode; }
• Carles Company: It works in Firefox and Chrome. It doesn't work in IE8... Weird.
• Carles Company: It works with the last update. I suppose stop propagation prevents the event to continue it's normal execution. Thanks!

Answer 2

Try the following:

$( '#myForm' ).submit();
$( '#mySubmitButton' ).click();