jQuery UI Dialog And The Enter – Return Key Problem

This is another post for my ‘Annoying Stuff’ collection and this one is very, so very annoying…

The problem is that jQuery UI, supports forms in dialogs but the problem is that a user can’t hit ‘Enter’ to submit the form, it will break everything, a user has to actually hit the ‘Submit’ (or whatever) button manually. This make the whole thing completely useless unless you make some changes that are basically tweaking the internals of jQuery UI, which is ugly and can break if they change things around but sadly this is the only solution for now.

Assuming that you use the same syntax jQuery UI suggests to create your form, the fix is something like this:

$('.dialog').find('input').keypress(function(e) {
	if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
		$(this).parent().parent().parent().parent().find('.ui-dialog-buttonpane').find('button:first').click(); /* Assuming the first one is the action button */
		return false;
	}
});

You might have to modify it a tiny bit, if that’s the case, you most likely have to change the part $(‘.dialog’) so that it selects the right container that wraps the form…