Question

I have a table with a quick edit function (updates only one field using AJAX), and I wish for ‘enter’ to submit the change. Trouble is, I have a button on a form on the same page, and every time I press ‘enter’ the action attached to that button (i.e. submit the form, which I do not want to do) is fired, and I cannot figure out for the life of me how to prevent that.

I’ve tried the following code, preventing the default on the keyup event (which is probably wrong) and on the button. My understanding though is that you prevent the default of an event, not an object, so I’m really not sure what to do –

/** Capture a key press (while a field within the quick edit row is selected) */
qeRow.keyup(function(e){
    e.preventDefault(); // Also tried '$('#change-permissions-button').preventDefault'
    if(e.keyCode === 27) { // Cancel on 'escape' (This is working fine)
        return inlineEditUserGroup.revert();
    } else if(e.keyCode === 13) { // Save the data on 'enter'
        return inlineEditUserGroup.save();
    }
});

Thanks.

Answer 1

Try listening to the keydown or keypress event.

qeRow.keypress(function(e){
    e.preventDefault(); // Also tried '$('#change-permissions-button').preventDefault'
    if(e.keyCode === 27) { // Cancel on 'escape' (This is working fine)
        return inlineEditUserGroup.revert();
    } else if(e.keyCode === 13) { // Save the data on 'enter'
        return inlineEditUserGroup.save();
    }
});

I guess the keyup-event is triggered ‘to late’, because it only listens to a key after you pressed in, and than the form is already submitted.