Отправка формы с помощью jQuery, затем обновление формы для отображения ошибок, не позволяет повторно отправлять форму - PullRequest
0 голосов
/ 07 декабря 2011

Я отображаю форму с помощью функции PHP:

function getLoginForm($errors = false) {
    $output .= '<form action="#" name="login" method="post" />';
        $output .= '<h2>Sign in to ' . APPNAME . '</h2>';
        $output .= '<div class="field">';
            $output .= '<label for="username">Username</label>';
            $output .= '<input type="text" id="username" name="username"' . getPostValue('username')  . ' />';
            if(isset($errors['username'])) {
                $output .= '<div class="help">' . $errors['username'] . '</div>';
            }
        $output .= '</div>';
        $output .= '<div class="field">';
            $output .= '<label for="password">Password</label>';
            $output .= '<input type="password" id="password" name="password"' . getPostValue('password')  . ' />';
            if(isset($errors['passsword'])) {
                $output .= '<div class="help">' . $errors['username'] . '</div>';
            }
        $output .= '</div>';
        $output .= '<div class="message"></div>';
        $output .= '<div class="button">';
            $output .= '<button type="button" name="commit">Login</button>';
        $output .= '</div>';
    $output .= '</form>';
    return $output;
}

У меня есть файл, который эта форма отправляет через jQuery для обработки значений. Если процессор обнаружит ошибку, он вызовет функцию getLoginForm с массивом ошибок в качестве параметра. Таким образом, при повторном отображении формы ошибки отображаются под полями.

Дело в том, что файл процессора возвращает всю форму, и он заменяется старой формой, в чем, я думаю, проблема. Когда я снова пытаюсь отправить форму, она ничего не делает, потому что jQuery не должен знать об этой новой форме.

Какие у меня есть варианты решения этой проблемы?

Спасибо, Райан

UPDATE

Обработчик отправки jQuery:

$('form').submit(function(e){
        var formElement = $(this);
        var data = formElement.serialize();
        var page = 'process.php?p=' + formElement.attr('name');
        formElement.find('button[name=commit]').attr('disabled', 'disabled').addClass('disabled');
        formElement.find('.message').html('<div class="pending">Sending your request... please wait...</div>');
        $.post(page, data, function(response) {
            formElement.html(response);
        });
        e.preventDefault();
    });

1 Ответ

0 голосов
/ 07 декабря 2011

Попробуйте использовать «live ()» для привязки к событиям для динамически создаваемых объектов.

Чтобы сделать это, вы должны изменить свой код на:

$('form').live('submit', function() { ...

Используя «live» дляbind to events будет привязан ко всем текущим и будущим элементам, соответствующим селектору jQuery.Поскольку вы перезаписываете свою форму, это новый элемент, и ваш текущий код не будет привязан к событию отправки в результате.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...