Submit ajax form in jQuery-UI Dialog with Enter Key

This question is posted quite a bit and nobody seems to be able to provide a good solution that won’t behave questionably. So here’s my take on it…

$('<div id="myDialog"></div>').appendTo('body').dialog({
    autoOpen: false,
    modal: true,
    closeOnEscape: true,
    buttons: {
        OK: function() {
            $.ajax({
                type: 'POST',
                url: 'save.php',
                data: $('#myDialog :input').serialize(),
                error: function(xml, status, error) {
                    $('#myDialog').html('<p><strong>Error Code:</strong> '+status+'</p><p><strong>Explanation:</strong> '+error+'</p>');
                }
            });
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    },
    open: function() {
        $(this).html('').load('form.php');
    },
    focus: function() {
        $(':input', this).keyup(function(event) {
            if (event.keyCode == 13) {
                $('.ui-dialog-buttonpane button:first').click();
            }
        });
    }
});

Note: You can also trigger the event on any element (not just form fields) by using $(this) as the selector.

That’s it, enjoy ๐Ÿ™‚

11 thoughts on “Submit ajax form in jQuery-UI Dialog with Enter Key”

  1. Glad it helped.

    Note: My example assumes the first button is the “default” (eg: Ok, Save, etc), so adjusting the selectors may be necessary if you need to fire the action of an alternate button ๐Ÿ˜‰

  2. You are attaching an event handler each time the dialog goes in focus. If you play with it long enough, you’ll notice that the code is executed 4,5 etc. times.

  3. Since I’m opening a modal dialog in the example, I don’t consider that a huge impact on performance. Now if you have a complex (many fields) form and non-modal dialog, it’s a very good point.

    If enough people ask, I’ll do an example with the listener assigned after the ajax form has finished loading.

  4. I’m trying to make it so that only the last field enter triggers submit.

    The previous fields should tab to the next if you click enter. The starred line doesn’t work for some reason. Any idea why?

    $(‘:input:not(:last)’, this).unbind().keyup(function(event){
    if(event.keyCode == 13){
    ### $(this).next(‘.input9’).focus();
    }
    });

  5. Instead of using…

    $(‘:input’, this)

    try…

    $(‘:input’, this).last()

    no need for unbind(), just apply the action to the desired fields instead of adding then removing ๐Ÿ˜‰

  6. i would like to have a listener with focus … because i am reusing the modal and every time i click on it …. i have the focus setted

  7. @juan: Unless I am misunderstanding you, my example does just that. The focus event of the dialog is where I have the highlighted code. What you do within that event is entirely up to you ๐Ÿ˜‰

Leave a Reply

Your email address will not be published. Required fields are marked *