passshift
@passshift
php, js, html5, css

Как отправить форму с первого клика?

Здравствуйте!

Замучился уже с этими формами. Подключил 2 плагина:

jqueryvalidation.org
malsup.com/jquery/form

Форма отправляется, валидация работает, лишнего ничего не выдумывал.

НО! submit срабатывает только после второго клика по нему. Всякое видал, но с таким еще не сталкивался.

Код:

$(document).ready(function() {

    getOrderData();

    // Загружаем заказ
    function getOrderData() {
        $('#order_data').load('/ajax/ajaxorder/GetOrderData', {order_id: $('#order_id').val()});
    }

    // Отправка форм
    $('body').on('submit', 'form[data-destination="order-form"]', function(e) {
      
    var form = this;

        $(form).validate(
                {
                    //Правила ...
                    
                    //Текста предупреждений...
                    
                    //Обработчик и отправка данных
                    submitHandler: function(form) {
                        $(form).ajaxSubmit({
                            success: getOrderData
                        });
                    }

                })
         e.preventDefault();       
        return false;

    });
    
});


Подскажите может что не так делаю

Добавлю: когда убираю функцию валидации и оставляют только

$(form).ajaxSubmit({
                            success: getOrderData
                        });


от отправляется с первого клика
  • Вопрос задан
  • 3598 просмотров
Пригласить эксперта
Ответы на вопрос 2
agladkov
@agladkov
У тебя валидатор вешается на форму только при первом клике, соответственно при втором он уже отрабатывает.
Убери код $('body').on('submit', ...
Вешай валидатора сразу на форму.
Код $(form).validate(... не валидирует по запросу, а вешает валидатора на форму.

Полный кусок кода.
$(document).ready(function() {
    // Загружаем заказ
    function getOrderData() {
        $('#order_data').load('/ajax/ajaxorder/GetOrderData', {order_id: $('#order_id').val()});
    }
    getOrderData();

    $('form[data-destination="order-form"]').validate({
                    //Правила ...
                    
                    //Текста предупреждений...
                    
                    //Обработчик и отправка данных
                    submitHandler: function(form) {
                        $(form).ajaxSubmit({
                            success: getOrderData
                        });
                    }
        });
    }); 
});

У тебя сейчас так?
Ответ написан
passshift
@passshift Автор вопроса
php, js, html5, css
Форма генерируется js:

success: function(responce) {

                    if (responce.code === 'none') {
                        result_articles.html('Ничего не найдено');
                    } else {

                        var result = '';
                        $(responce.arr).each(function() {
                            result += $(this).attr('article') + ' <a href="/article/select/' + $(this).attr('id') + '" tagret="_blank">' + $(this).attr('name') + '</a>\n\
                                       <form data-destination="order-form" action="/ajax/ajaxorder/ArticleToOrder"  method="post">\n\
                                       Количество <input type="text" name="quantity" value="1">\n\
                                       <input type="hidden" name="order_id" value="' + order_id + '">\n\
                                       <input type="hidden" name="article_id" value="' + $(this).attr('id') + '">\n\
                                       <button type="submit">Добавить в заказ</button> \n\
                                       </form>';
                        });
                        result_articles.html(result);

                    }
                }


Нажимаем "submit" и перекидывает на /ajax/ajaxorder/ArticleToOrder где выдает статус

{"code":"success"}

т.е. товар добавлен в заказ...

Валидация и отправка формы ajax'ом с Вашим примером к сож. не фурычат...

т.е. приходится по-любому вешать обработчик submit-а (
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы