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. Robert Mullaney Post author

    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 😉

    Reply
  2. Bogdan

    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.

    Reply
  3. Robert Mullaney Post author

    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.

    Reply
  4. David

    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();
    }
    });

    Reply
  5. Robert Mullaney Post author

    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 😉

    Reply
  6. juan

    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

    Reply
  7. Robert Mullaney Post author

    @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 😉

    Reply

Leave a Reply

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