Отправка ajax нескольких форм

[timur_]

На странице корзины нужно вывести все товары определенной категории и сразу добавлять в корзину без перехода на страницу товара:
На странице товара это организовано так: у товара есть параметры, которые заполняются в <form>, по кнопке Купить исполняется этот код

$(document).on('click', '#buy_button', function(){
            var form_val = $('form#order').serializeArray();
            $('#order_act').val('1');
            $(this).remove();
            $.ajax({
                    url: '/catalog/changeOrder',
                    type: 'POST',
                    data: $('#order').serialize(),
                    dataType: 'json',
                    async: "false",
                    success: function (data) {
                                     window.location = "/catalog/basket";
                    }
                    });
                return false;
    });

Я на странице корзины вывожу товары, оборачивая каждый тегом <form> с полями типа hidden, которые будут так же обработаны в /catalog/basket

Теперь вопрос, как мне в скрипте к кнопке идентифицировать форму и данные из полей? На странице товара доступ к форме и кнопке по id объекта, а у меня форм много, а id на странице может быть только один, бредом же будет писать под каждый товар отдельный скрипт с разными id, подскажите пожалуйста.

 

[redfoxius]

Что-то в этом роде:

<form data-item="999">
<input type="button" data-item="999" class="buy-btn" value="Buy this!">
</form>

$(".buy-btn").each(function(){
    $(this).click(function(){
        var itemID = $(this).data("item");
        var form_val = $('form [data-customerID="'+itemID+'"]').serializeArray();
        $.ajax({
            url: '/catalog/changeOrder',
            type: 'POST',
            data: $('#order').serialize(),
            dataType: 'json',
            async: "false",
            success: function (data) {
                window.location = "/catalog/basket";
            }
        });
    });
});

PS: а более адекватного решения чем 100500 форм на странице не нашлось разве?

 

[onizzuka_m]

Если работать через атрибут data то не обязательно чтобы была форма. Этот атрибут вполне удачно можно использовать и на теге а

Тогда код будет такого плана:

<a href="" class="buy-btn" data-item="999">купить </a>

$('.buy-btn').click (function (e){
       e.preventDefault ();
       var data_item = $(this).attr('data-item');

       $.ajax (....

})

 

[timur_]

Что-то в этом роде:

<form data-item="999">
<input type="button" data-item="999" class="buy-btn" value="Buy this!">
</form>

$(".buy-btn").each(function(){
    $(this).click(function(){
        var itemID = $(this).data("item");
        var form_val = $('form [data-customerID="'+itemID+'"]').serializeArray();
        $.ajax({
            url: '/catalog/changeOrder',
            type: 'POST',
            data: $('#order').serialize(),
            dataType: 'json',
            async: "false",
            success: function (data) {
                window.location = "/catalog/basket";
            }
        });
    });
});

PS: а более адекватного решения чем 100500 форм на странице не нашлось разве?

ну, а как мне "совершить покупку", если нужно заполнить массив данных $basket и обработать в контроллере корзины?
ваш метод возвращает пустой массив, для полноты картины вот форма

<form class="bas_order product_item" action="/catalog/basket/"  method="post" data-item="<?php echo $product->id; ?>">
                    <input type="hidden" name="product_id" value="<?=$product->id;?>"/>
                    <input type="hidden" id="order_act" name="act" value="only_price"/>
                    <input type="hidden" id="skin" value="<?=$selected_skin_s?>"/>
                        <div class="buy-btn-bas" data-item="<?=$product->id;?>" rel="3">Добавить в заказ</div>
                 </form>

Если работать через атрибут data то не обязательно чтобы была форма. Этот атрибут вполне удачно можно использовать и на теге а

Тогда код будет такого плана:

<a href="" class="buy-btn" data-item="999">купить </a>

$('.buy-btn').click (function (e){
       e.preventDefault ();
       var data_item = $(this).attr('data-item');

       $.ajax (....

})

всё бы ок, но помимо ID товара, у него есть параметры, которые так же нужно передавать, форма нужна как раз для этого

 

[redfoxius]

ну, а как мне "совершить покупку", если нужно заполнить массив данных $basket и обработать в контроллере корзины?
ваш метод возвращает пустой массив, для полноты картины вот форма

Ок, если вам настолько все надо разжевывать, то пожалуйста:

<head>
    <meta charset="utf-8" />
</head>
<form class="bas_order product_item" action="/catalog/basket/"  method="post" data-item="1">
    <input type="hidden" name="product_id" value="1"/>
    <input type="hidden" id="order_act" name="act" value="only_price"/>
    <input type="hidden" id="skin" name="skin" value="skin1"/>
    <div class="buy-btn" data-item="1" rel="3">Добавить в заказ</div>
</form>
<form class="bas_order product_item" action="/catalog/basket/"  method="post" data-item="2">
    <input type="hidden" name="product_id" value="2"/>
    <input type="hidden" id="order_act" name="act" value="only_price"/>
    <input type="hidden" id="skin" name="skin" value="skin2"/>
    <div class="buy-btn" data-item="2" rel="3">Добавить в заказ</div>
</form>
<form class="bas_order product_item" action="/catalog/basket/"  method="post" data-item="3">
    <input type="hidden" name="product_id" value="3"/>
    <input type="hidden" id="order_act" name="act" value="only_price"/>
    <input type="hidden" id="skin" name="skin" value="skin3"/>
    <div class="buy-btn" data-item="3" rel="3">Добавить в заказ</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".buy-btn").each(function(){
    $(this).click(function(){
        var itemID = $(this).data("item");
        var form_val = $('form[data-item="'+itemID+'"]').serialize();
        $.ajax({
            url: '/catalog/changeOrder',
            type: 'POST',
            data: form_val,
            dataType: 'json',
            async: "false",
            success: function (data) {
                window.location = "/catalog/basket";
            }
        });
    });
});
</script>

всё бы ок, но помимо ID товара, у него есть параметры, которые так же нужно передавать, форма нужна как раз для этого

Атрибутов data у элемента может быть много, далее просто пишете следующее:

<input type="button" class="buy-btn" data-item="999" data-skin="skin3" value="Buy">

$(".buy-btn").each(function(){
    $(this).click(function(){
        var data_item = {
            'product_id': $(this).data('item'),
            'skin': $(this).data('skin')
        };
       $.ajax({
            url: '/catalog/changeOrder',
            type: 'POST',
            data: $.param(data_item),
            dataType: 'json',
            async: "false",
            success: function (data) {
                window.location = "/catalog/basket";
            }
        });
    });    
});

 

[timur_]

Проблему решил, большое Вам спасибо!