Как предотвратить закрытие диалогового окна JQuery UI при нажатии Enter

Question

Мой HTML определен так:

забыл пароль

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

Сценарии:

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

});

Теперь, когда я нажимаю кнопку «забыл пароль», я получаю диалоговое окно (отметьте его на этой скрипке , раскладка выглядит ужасно, но вы поймете, в чем суть). Когда я нажимаю ESC, я возвращаюсь к начальному экрану, когда я нажимаю «пароль почты», ничего не происходит, но когда я нажимаю «ввод», браузер загружает другое местоположение, как будто выполняется действие по умолчанию для формы.

В скрипке это трудно увидеть, но на моем сайте люди перенаправляются на ./?username=, что говорит мне, что это нежелательное поведение из формы на начальном экране. Как я могу предотвратить это?

Answer 1

В диалоговом окне добавить идентификатор:

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

Затем скажите jQuery, чтобы он не отправлялся, поскольку диалог сделает это:

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

Answer 2

Ваш диалог закрывается, потому что когда нажата клавиша ввода, форма отправляется, таким образом, обновляя страницу.Чтобы остановить это, вы можете добавить что-то вроде.

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

Answer 3

Мой обходной путь - поставить скрытую кнопку перед основной кнопкой, похоже, первая кнопка используется по умолчанию.Так что добавьте свои кнопки вот так;просто убедитесь, что у вас есть класс .hide с отображением: 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");
            }}
        }

Answer 4

Прежде всего вам нужно иметь кнопку отправки в форме, в противном случае нажатие клавиши ввода не отправит ее (вы можете поместить скрытую кнопку отправки - должно работать также).

И после этого вы можете поставить onsubmit="jsProcessFunctionHere(); return false".

Таким образом, нажатие клавиши ввода вызовет процедуру сброса пароля вместо закрытия диалогового окна.