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

Question

[# a r t u r #]

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

Замучился уже с этими формами. Подключил 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
                        });

от отправляется с первого клика

Comments

[aen]

А у вас плагины не конфликтуют?

[# a r t u r #]

aen: Вот пример с сайта плагина валидатора (jqueryvalidation.org/validate/):

Type: Function()
Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it is validated.
Example: Submits the form via Ajax (www.malsup.com/jquery/form/#api) when valid.

$(".selector").validate({
submitHandler: function(form) {
$(form).ajaxSubmit();
}
});

Все делаю по аналогии :-/

[# a r t u r #]

В консоли ошибок нет. Кликаю субмит - ноль эмойций, во второй раз кликаю - запрос пошел... ну если убираю валидацию, то сразу уходит с первого клика.

[aen]

Боюсь, что тут дебаггером надо проходить по строкам.

[# a r t u r #]

aen: можно поподробнее? Я с js не дружу, мне бы поскорее к php вернуться

Answer 1

[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
                        });
                    }
        });
    }); 
});

У тебя сейчас так?

Comments

[# a r t u r #]

При таком раскладе валидация вообще не работает и preventDefault(); тоже

[# a r t u r #]

код ниже написал

[agladkov]

В submitHandler приходит не событие а форма.
jqueryvalidation.org/validate/#submithandler

[# a r t u r #]

agladkov: только что пробовал, не канает

перед validate приписываю:

var form = $('form[data-destination="order-form"]');
...
...
submitHandler: function(form) {
$(form).ajaxSubmit({
success: getOrderData
});
}

- валидация не происходит, форма отправляется с перезагрузкой страницы

[agladkov]

У тебя этот код вообще выполняется?
Дай уже ссылку на страницу :)

[# a r t u r #]

agladkov: на локалке все (

Там суть такая:

Есть шаблон, в нем подгружается файл c этим кодом, но все формы которые нужно проверять и отправлять располагаются в дополнительных видах, поэтому писал так:

$('body').on('submit', 'form[data-destination="order-form"]', function(e) ...

а не так

$('form[data-destination="order-form"]').on('submit', function(e) ... - это не работало

тот код который сейчас есть он работает, но со второго клика

[# a r t u r #]

agladkov: Сейчас заменил

$('body').on('submit', 'form[data-destination="order-form"]', function(e)

на

$('body').on('keyup', 'form[data-destination="order-form"]', function(e)

c key-апом работает и валидация и отправка с первого тыка, НО не у всех форм, хотя data-destination="order-form" прописано у всех ))

странно все это

[agladkov]

Так ты не убирал $('body').on('submit', 'form[data-destination="order-form"]', function(e) когда вешал валидацию?

[# a r t u r #]

agladkov: да )) я понимаю о чем ты говоришь и перепробовал разные варианты. Если убираю body то вообще ничего не работает и форма уходит по указанному экшену

[# a r t u r #]

agladkov: ответил ниже

[agladkov]

Артур Селиванов: Стоп! Что значит "генерируется js"? В какой момент?

[# a r t u r #]

agladkov: суть вот в чем: есть строка "живого поиска", вбиваю в него наименование или артикул товара, если что-то нашлось то это все выводится в отдельный DIV в виде форм:

---
Наименование: Джинсы
Цена: 1500р
Кол-во (поле), кнопка submit (добавить в заказ)
---
...

В данном случаем проверяется поле количество (не менее 1 шт и только целые числа), при нажатии на submit выбранная позиция в указанном количестве добавляется в заказ... вот как-бы такой алгоритм

[agladkov]

Так в том то и проблема, что у тебя код $('form[data-destination="order-form"]').validate отрабатывает один раз, при загрузке страницы, т.е. на новые сгенерированные формы он не вешается.
Для этого тебе после генерации надо на вновь созданную форму вешать отдельно валидатор.

[# a r t u r #]

agladkov: как? Оо

[agladkov]

Покажи код, который формы генерирует.

[# a r t u r #]

agladkov: ниже добавил

[# a r t u r #]

agladkov: здесь цикл форм, но помимо этого цикла есть еще цикл форм с товарами которые уже в заказе... там суть та же только уже удаление из заказа и изменение количества...

Answer 2

[# a r t u r #]

Форма генерируется 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-а (