Блог

Главная - Вопросы по программированию - Не удается отправить форму после успешной проверки AJAX с помощью PHP и прототипа

Не удается отправить форму после успешной проверки AJAX с помощью PHP и прототипа

#ajax #forms #validation #prototypejs

#ajax #формы #проверка #prototypejs

Вопрос:

У меня есть формы на сайте, которые обрабатываются PHP, включая проверку. Обычно, если есть ошибки, пользователь возвращается в форму с соответствующими сообщениями об ошибках. Для пользователей с включенным javascript я пытаюсь написать javascript с Prototype, который использует AJAX для выполнения той же проверки PHP (чтобы избежать дублирования кода) и отображения сообщений об ошибках без фактической отправки формы и ожидания ее перезагрузки.

Скрипт работает очень хорошо, улавливая ошибки через AJAX и отображая их. Но, когда ошибок нет, я не могу отправить форму и перейти к следующей странице. Я работал с Event.stopObserving, но он просто перезагружает страницу (которая не является URL-адресом действия формы, форма отправляется на страницу, отличную от самой формы, так что это не сервер, отправляющий браузер обратно). Я не настолько хорош в javascript и Prototype, поэтому, вероятно, я упускаю что-то очевидное, но любая помощь была бы очень признательна. В любом случае, вот мой код:

 document.observe("dom:loaded", function() {
    $$('form')[0].observe('submit', validate);

    function validate(event) {
        event.stop();
        // remove any existing error messages
        var curErrors = $$('ul.error');
        for( i=0, im=curErrors.length; i<im; i   ) curErrors[i].remove();

        $$('form')[0].request({
            parameters: { 'js' : 1 },
            requestHeaders: {Accept: 'application/json'},
            onSuccess: function(req) { 
                var errors = req.responseText;
                if( errors == '[]' ) {
                    // no errors, submit form to server
                    $$('form')[0].stopObserving('submit', validate);
                    $$('form')[0].submit();
                } else {
                    // have errors, display error messages
                    var errors = errors.evalJSON(true);
                    for( var error in errors ) {
                        var errorMsg = '<ul class="error"><li>'   errors[error]   '</li></ul>';
                        var input = $$('[name="' error '"]')[0];
                        // display error message next to form field
                        . . .
                    }
                }
            },
            onFailure: function() {
                // can't validate here, let server do it
                $$('form')[0].stopObserving('submit', validate);
                $$('form')[0].submit();
            }
        });
    }
});

Ответ №1:

Не вызывайте event.stop() немедленно в своем методе validate — обработчик события произойдет раньше, чем событие, что означает, что метод validate будет запущен до отправки формы. Просто переместите эту строку в ветку инструкции if относительно сбоя проверки, и она должна работать просто отлично. http://www.prototypejs.org/api/event/stop

Комментарии:

1. Спасибо, это тоже была моя оригинальная мысль и то, чего я действительно хотел бы для чистого кода, но объект event, похоже, не передается в функцию onSuccess. Похоже, проблема с переменной областью видимости, и я не могу понять, как правильно ссылаться на событие в функции onSuccess. Я пытался передать ее с помощью req, но это не работает — это всегда просто неопределенный объект.

2. Разве вы не хотели бы использовать new Ajax.Request() функцию вместо $$('form')[0].request() выполняемого вами вызова? Я считаю, что это сработало бы. В любом случае, как я уже говорил изначально, если событие действительно передает функцию OnFailure, тогда вы просто переместите event.stop() вызов в метод сбоя.