Question

I’ve got a page with a bunch of little forms. I want to dynamically assign a hotkey to submit each form. The code looks like:

HTML

<form:form id="formCtrlr" action="review.html">
    <input name="id" type="hidden" value=""/>
</form:form>
<form:form id="formCtrls" action="save.html">
    <input name="id" type="hidden" value=""/>
</form:form>

…lots of other little forms like this each with a unique id related to the hotkey…

jQuery

$('[id^="formCtrl"]').each(function() {
    var me = $(this);
    var myId = me.attr("id");
    var keyBinding = myId.replace("form", "").replace(/(.{4})/g,"$1+");

    $(document).bind('keydown', keyBinding, function (evt){ 
        evt.stopPropagation();
        evt.preventDefault();
        $("#"+myId).submit();
        return false;
    });
});

Simple right? But there are also several text inputs on the page and if the user is typing in one of those fields and hits one of the hotkeys, the corresponding form is not submitted and in fact if the hotkey matches something for the browser like Ctrl-s the save dialog is shown. Any idea how I can stop this from happening?

Answer 1

I would guess that the hotkey event is being captured by the input and then blocked. Try adding the event to the inputs directly, instead of to the form.