Как быть с несколькими формами на ajax?

Question

[Alina1995]

Всем привет! На странице может быть несколько вот таких форм

<form id="add_product" method="post">
     <button class="btn-small">
      <span class="icon"></span>
    </button>
   <input type="hidden" name="id_add" value="'.$id.'">
</form>

<script type="text/javascript">
$(document).ready(function() {
    $('#add_product').submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: 'add_product.php',
            data: $(this).serialize(),
            success: function(html){
          $("#content").html(html);
        }
       });
     });
});
</script>

Но вот проблемка, ajax работает только с первым элементом. Вероятнее всего это из-за того что у двух и более форм одинаковый id="add_product" как правильно решить эту задачку?

Comments

[ThunderCat]

вы с vladislav198712 братья, твинки или просто учитесь вместе? )

[Alina1995]

ThunderCat, вероятно с одного курса, надеюсь ему поможет эта тема.

Answer 1

[Stalker_RED]

Поменять id.

If the id value is not the empty string, it must be unique in a document.

https://developer.mozilla.org/en-US/docs/Web/API/E...

Comments

[Alina1995]

Количество форм может быть большое количество. И писать для каждого обработчик не совсем правильно. Должен быть способ проще.. Можно рандомизировать id подставив случайное число, предварительно создав его в php, но как это обработать?

[Stalker_RED]

Alina1995, напишите один обрботчик, без id.
Зачем вам вообще в этих формах id?
https://jsfiddle.net/68ncxk40/

[Stalker_RED]

Alina1995, еще один вариант - не делать множество форм, а сделать одну большую форму с кучей кнопок.

[Alina1995]

Stalker_RED, Спасибо! Сразу же все получилось!

Answer 2

[Adamos]

Избавиться от id вовсе. Генерировать форму в JS целиком и попутно навешивать на нее ее собственный обработчик.
Впрочем, если любая из них заполняет результатом один и тот же #content - можно просто сменить id на класс, в обработчике-то this.

Comments

[Alina1995]

#content наполняет один, это корзина. А как правильнее класс прописать в форме или в кнопку? И как указать это в js?

[Михаил Ливач]

Alina1995, в форме. Следует научиться чётко понимать, что нужно в каждом конкретном случае: клик по кнопке или отправка формы. Даже если кнопка находится совсем в другой части страницы, но нужна отправка формы, пишете 2 обработчика:

1. на кнопку - который вызывает сабмит нужной формы;
   
2. на сабмит формы.
   

Это сделает Ваш код легче для понимания.

как указать это в js?

в случае jQuery, разницы почти нет:

$('.add_product').submit(function(e) {
//...
});