how to prevent a jquery ui dialog to close on hitting enter

Question

I have my HTML defined like this:

forgot password

<div id='dialog-form-lostpass' title='password recovery' class='hidden lsdialog'>
    <p id='explain'>Please enter your username or email address. We will then immediately mail your
        password to your registered email address</p>
    <p id='progress'></p>
    <form>
        <fieldset>
            <label for='username'>username or email</label><br />
            <input type='text' name='username' id='username' class='text ui-widget-content ui-corner-all' /><br />
        </fieldset>
    </form>
</div>

Scripting:

 $(document).ready(function() {
    $(":button#forgotpassword").click(function() { //* open dialog to retreive user's password
        $("#dialog-form-lostpass").find("p[id=progress]").text(null); //* reset progress
        $("#dialog-form-lostpass").dialog("open");
        return false;
    });

    $("#dialog-form-lostpass").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            "mail password": function() {
                $("#dialog-form-lostpass").find("p[id=progress]").html("<img src='images/wait.gif' height=10>Contacting Linkshelf Server...");

                $.post(options.engine, {
                    command: "retreivepassword",
                    username: $("#dialog-form-lostpass").find("input[id=username]").val(),
                }, function(data) {
                    if (data.success) {
                        $("#dialog-form-lostpass").dialog("close");
                        $("#loginscreen").find("p[id=progress]").text("Your password is sent to your registered email address. You should receive an email from us soon. Make sure there is no spam-filter blocking our email.").addClass("ui-state-error").removeClass("ui-state-error", 1700);
                    } else {
                        if (data.feedback == "invalid entry") {
                            $("dialog-form-lostpass").find("p[id=progress]").text("Invalid entry. You didn't provide us with enough information to retreive your password").addClass("ui-state-error").removeClass("ui-state-error", 1700);
                        } else {
                            $("#dialog-form-lostpass").find("p[id=progress]").text("Unknown username and/or email address. We can not retreive your password").addClass("ui-state-error").removeClass("ui-state-error", 1700);
                        }
                    }
                }, "json");
            }
        },
    });

});

Now when I hit the 'forgot password' button I get the dialog (check it on this fiddle, layout looks terrible, but you'll get the point). When I hit ESC I go back to the initial screen, when I click 'mail password' nothing unexpectedly happens, but when I hit "enter" to browser loads a different location, as if a default action for the form is executed.

In the fiddle it's hard to see, but in my site people are forwarded to ./?username=, which tells me this is unwanted behavior from the form in the initial screen. How can I prevent this from happening?

http://stackoverflow.com/questions/895171/prevent-users-from-submitting-form-by-hitting-enter — James Montagne, May 13 '11 at 14:09
I'm afraid it's a little more complicated than that. If you check the fiddle and hit 'enter' on the initial form there is no redirecting behavior. Also, when I click 'close' on the dialog, nothing happens. But when I hit enter on the dialog I get redirect to ./?username. There must be some more elegant solution than blocking 'enter'. I do want people to be able to use 'enter' on the dialog, like they're used to... — patrick, May 13 '11 at 14:15

score 4 · Answer 1 · answered May 13 '11 at 14:16

4

In the dialog form add an id:

<form id="passwordform">
        <fieldset>
            <label for='username'>username or email</label><br />
            <input type='text' name='username' id='username' class='text ui-widget-content ui-corner-all' /><br />
        </fieldset>
    </form>

Then tell jQuery to prevent it from submitting since the dialog will do it:

$('#passwordform').submit( function(e) {
     e.preventDefault();
});

answered May 13 '11 at 14:16

Cfreak

19,191
6
49
60

but I do want people to be able to use the default. The problem lies in the fact that there are two nested forms. I tried giving them different ID's, but that doesn't work. I think I'll disable the default for the first form on opening the dialog and re-enable it again when the dialog is closed... – patrick May 13 '11 at 14:33
I used this as a workaround. Funny thing is that with the ID's in place I need to prevent default action for the dialog to prevent default action in the initial form. Somehow I do feel this is a problem with nested forms, even though they have a unique ID. Don't know if that's a common problem or something jQuery-UI specific though... – patrick May 13 '11 at 14:45
Since the dialog is hidden until you need it, try defining it outside your initial form. It doesn't look like you need to submit any of the elements together so it shouldn't affect your functionality. You're right nested forms are generally not a good idea. – Cfreak May 13 '11 at 16:57

Paramount · Answer 2 · 2011-05-13T14:18:51.573

3

Your dialog is closing because when enter is hit the form is submitting, thus re-refreshing the page. To stop this you can add something like.

$('form').submit(function(e){
    return false;
});

edited May 13 '11 at 14:18

answered May 13 '11 at 14:12

Paramount

1,109
14
27

but closing the dialog triggers submitting of the underlying form, that's a bit weird, isn't it? Could it be a problem with nested forms maybe? – patrick May 13 '11 at 14:19
Yep, that was it! the nested forms are the problem. I'll try adding some ID's (in the jQuery-UI documents there are no ID's in the forms). But that is the solution... I remove the form from the dialog and it's not happening anymore... – patrick May 13 '11 at 14:20
In short: hitting enter triggered a submit on the first form, not on the dialog it should trigger – patrick May 13 '11 at 14:21

score 0 · Answer 3 · edited Sep 29 '12 at 23:59

0

First of all you need to have a submit button in the form, otherwise hitting enter doesn't submit it (you can put a hidden submit button - should work also).

And after that you can put a onsubmit="jsProcessFunctionHere(); return false".

This way hitting enter will trigger your password reset procedure, instead of closing the dialog.

edited Sep 29 '12 at 23:59

ronalchn

12,225
10
51
61

answered Aug 22 '12 at 12:30

LachoTomov

3,312
30
42

score 0 · Answer 4 · answered Oct 26 '12 at 08:17

My workaround was to put a hidden button before the main button, it seems the first button is the default. So add your buttons like this; just make sure you have a .hide class that has display:none;

        buttons: {

            "Hiden": { text: "", class:"hide", click: function () {
                return false;
            }},
            "Process": { class: "btn btn-primary", text: "OK", click: function () {
                alert('process');
            }
            },
            Cancel: { class: "btn", text: "Cancel", click: function () {
                $(this).dialog("close");
            }}
        }

how to prevent a jquery ui dialog to close on hitting enter

4 Answers4