Home > jQuery UI Dialog And The Enter – Return Key Problem

DirectorySync is a directory synchronizing and backup utility providing automated, real-time syncing and scheduled, configurable backups at an affordable price.

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…

Filed under: Annoying Stuff,JavaScript,jQuery,Programming,Web Design,Web Development Posted by: Codehead

Do you have any questions? ask here.

Follow me on Twitter.

11 Comments »

Sideshowbob:

Works perfectly, thanks a lot.

Comment
Codehead:

Wow, so they didn’t fix this yet?

Comment
Roll:

You’re the master! Thanks soooo much for that fix. Worked a charm.

Comment
Camilo:

la verdad no se ingles pero de verdad muchas gracias me salvaste por que no sabia que hacer y tu codigo funciona excelentemente

Comment
Codehead:

Usted es muy agradable, me alegro de haber podido ayudar!

Comment
Merijn:

Works very well. Be carefull that it does not click ok button in other (hidden) dialogs as well.

I removed .parent().parent(), copied this for the other dialog and now they both work well.

Thanks.

Comment

Robert:

I found a quite simple solution for this problem:

    var d = $('').dialog(
        buttons: [{
            text: "Ok",
            click: function(){
                // do something
                alert('it works');
            },
            className: 'dialog_default_button'
        }]
    });
 
    $(d).find('input').keypress(function(e){
        if ((e.which &amp;&amp; e.which == 13) || (e.keyCode &amp;&amp; e.keyCode == 13)) {
            e.preventDefault();
            $('.dialog_default_button').click();
        }
    });

Comment

Ozil:

You are the man! Thanks for the help. I got my code to work like this:

		$saveAsDialog.dialog('open').find('input').keypress(function(e)
		{
			if ((e.which &amp;&amp; e.which == 13) || (e.keyCode &amp;&amp; e.keyCode == 13))
			{
				$(this).parent().parent().parent().parent().find('.ui-dialog-buttonpane').find('button:first').click();
				return false;
			}
		});

Comment

Cory:

@Robert – What version of jQuery UI are you using that has a className option for buttons?

Comment
piR:

Very complicated.

http://stackoverflow.com/questions/868889/submit-jquery-ui-dialog-on-enter

$(‘#DialogTag’).keyup(function(e) {
if (e.keyCode == 13) {
//Close dialog and/or submit here…
}
});

Assuming you wrote a function to bind it to the OK button, you just have to call it again.

(14 dec 2011)

Comment
Stef:

Thank you. Helped me a lot !

Comment