Как отправить по отдельности несколько одинаковых форм с разными ID?

Question

[# a r t u r #]

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

Имеется список форм из 10 штук:

<form id="sender">
    <input type="hidden" id="article" value="ID товара">
    <input type="text" id="quantuty" value="количество штук">
    <input type="button" id="send_to_cart">
</form>
...

Мне нужно передать ID товара и количество штук Ajax-обработчику.

Проблемы начались когда вместо button был submit, тогда я пытался брать данные формы с помощью .serialize, но ничего не получалось скорее всего виноват Chrome, он не давал запретить отправку данных на сервер и страница перезагружалась.

Было решено заменить submit на button, но теперь я не знаю как забрать данные формы и отдать Ajax'у.

Подскажите, как это правильно сделать, до этого не приходилось писать на jquery и яве, но без этого никак в сложившейся ситуации.

Добавлю: jQuery Form Plugin не помогает, структура такая:

Вот хэд:

<script src="//code.jquery.com/jquery-1.11.1.js"></script>
    <script src="/media/js/jquery.form.min.js"></script>

Вот форма:

<form id="form" action="/cart/add" method="post"> 
            <input type="hidden" id="article_id" value="15>" /> 
            <input type="submit" value="В корзину" /> 
        </form>

Вот так пытаюсь обработать:

$(document).ready(function() {
    $('#form').submit(function(e) {
        e.preventDefault();
        $(this).ajaxSubmit(options);
        return false;
    });
});

При нажатии на submit страница обновляется (т.е. срабатывает post и уходит запрос к серверу, что недопустимо)

Comments

[Никита Гущин]

Я попробовал запустить ваш код - jsfiddle.net/h83dcLas страница не обновляется.

Answer 1

[Никита Гущин]

Не надо использовать велосипедов. Да и плагин совершенно не нужен. Как советуют на stackoverflow
return false;
- это то, что Вам нужно. Я отписался в комментарии под вопросом - код абсолютно рабочий, страница не перезагружается.
Убедитесь, что обработчик вызывается и по возможности используйте последнюю версию jq.

Как уже Вам советовали используйте атрибут name для полей, в целом код может выглядеть вот так:

<form id="form" action="/cart/add" method="post"> 
    <input type="hidden" value="15>" name="articleId" /> 
    <button type="submit">В корзину</button> 
</form>

В форме я заменил input[type=submit] на button[type=submit] -- это более общепринято :) И добавил атрибут name = articleId

$(function(){
    $('#form').submit(function(e) {        
        var $this = $(this);
        var data = {};
        $this.find('input').each(function(){
            var $el = $(this);
            var key = $el.attr('name');            
            if(key)
                data[key] = $el.val();
        });
        $.post($this.attr('action'),data)
         .done(function(r){
             console.log('good call back');
         })
         .fail(function(r){
            console.log('bad call back');
         });
        e.preventDefault();
        return false;
    });
});

Тут реализована автоматическая сборка полей формы в переменную data: данные группируются по data[input.name] = val. Адрес post-запроса из атрибута 'action' формы .Пример - jsfidle

Если хотите реализовать в виде плагина - можно сделать нечто подобное:

jQuery.fn.extend({
    myFormSubmit: function(o){
        var opts = {
            doneCb: function() {},
            failCb: function() {}
        };
        opts = $.extend(opts,o);
        return this.each(function(){
            $(this).submit(function(e) {        
                var $this = $(this);
                var data = {};
                $this.find('input').each(function(){
                    var $el = $(this);
                    var key = $el.attr('name');            
                    if(key)
                        data[key] = $el.val();
                });
                $.post($this.attr('action'),data)
                 .done(opts.doneCb)
                 .fail(opts.failCb);
                e.preventDefault();
                return false;
            });
        });
    }
});

$(function(){
    $('#form').myFormSubmit({
        doneCb: function(r){
            console.log('good call back');
        },
        failCb: function(r){
            console.log('bad call back');
        }
    });
});

jQuery.fn.extend - добавляет новый метод в jq. Пример - jsfiddle

PS я использовал свежую версию jQuery.

Comments

[# a r t u r #]

Премного Вам благодарен за то, что разжевали, но проблема у меня в другом. Проект на Kohana 3.3, и вот это:

e.preventDefault();
return false;

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

[# a r t u r #]

РАЗОБРАЛСЯ!

Не знаю только как сформулировать. Проект построен по принципу HMVC... как только запустил функция

$(function() {
$('#moyaforma').submit(function(e) {
e.preventDefault();
alert('Работает!!!!!!!!!!!!!');
return false;
});
});

внутри файла с видом где находится форма все тут же заработало. До этого функция располагалась в общем файле js который подгружался в head при загрузке страницы.

Answer 2

[# a r t u r #]

Кстати chrome тут не при чем... IE тоже отравляет форму (

Answer 3

[Алексей Лебедев]

Уберите тег form
Поставьте onclick на кнопку.

<div id="sender">
    <input type="hidden" id="article" value="ID товара">
    <input type="text" id="quantuty" value="количество штук">
    <input type="button" onclick="SendForm();">
</div>

function SendForm() {
  $.post('url/', {article: $("#article").val(), quantuty: $("#quantuty").val(),   }, function (data) { 
    alert('Отправлено');
  });
}

Comments

[Александр Таратин]

@aalebedev а ничего, что так отправка по enter не будет работать? Ну и onclick="SendForm();" говнокод опять же.

[# a r t u r #]

Дивов с id="sender" будет 10, в итоге данные в SendForm() попадут с первого

[Александр Таратин]

@passshift если хотите перейти на темную сторону, то можно делать
$(this).parent().children("#article").val() Но за несколько одинаковых id на странице хочется ударить.

[Александр Таратин]

@passshift вот это вообще ничего не должно отправлять на сервак
используйте name

[Александр Таратин]

парсер съел.

[Александр Таратин]

хз как теги вставить.

[# a r t u r #]

@Taraflex: да сам не хочу несколько id использовать (((