Как понять какой товар заказ пользователь?

Question

[thedimadima]

Доброго времени суток. Есть сайт с 40 товарами, при клике на товар выпрыгивает модальное окно с оформлением заказа. Как сделать так, что бы было понятно, какой товар заказывает пользователь?

Без создания 40 форм, естественно) Модальное окно вылетает с помощью JS по классу, который указан в ссылке.

Заранее спасибо!

Comments

[sonca-ca]

Заполняйте с помощью того же js айди товара, хранить можно в hidden поле внутри формы оформления заказа

Answer 1

[Danil Sapegin]

Добавить в товар аттрибут типа data-id="1" - где 1 это ID товара
например
товар
В коде, где открывается модалка взять этот data("id") и передать на сервер вместе с формой

Comments

[thedimadima]

Извиняюсь за свою тупость)
Как передать этот атрибут формой?

<form data("id") method='POST'>
....
</form>

Как то так?

[Danil Sapegin]

thedimadima,
data("id") - используется в javascript

<form  method='POST'>
<input type="hidden" name="id" value="1" />
</form>

[thedimadima]

Вот мой html

<div class="product-box">														
<a href="javascript;" data-id='BMW X7' class="title open-modal-btn">BMW X7</a><br/>																										</div>

<div id="window">
  <div class="cover"></div>
  <div class="modal">
    <div class="content-win">
      <h3>Оформление заказа </h3>
      <form method='POST'>
        <input type="text" placeholder="Ваше имя">
        <input type="text" placeholder="Ваш номер телефона">
        <button id='but-win' type='submit'>Заказать</button>
      </form>
    </div>
  </div>
</div>

А вот JS

<script>
// open modal
var wrap = $('#window'),
     btn = $('.open-modal-btn'),
     modal = $('.cover, .modal, .content-win');

btn.on('click', function() {
  modal.fadeIn();
});

// close modal
$('.modal').click(function() {
  wrap.on('click', function(event) {
    var select = $('.content-win');
    if ($(event.target).closest(select).length)
      return;
    modal.fadeOut();
    wrap.unbind('click');
  });
});
</script>

Атрибут data я прописал на ссылке с товаром, но не совсем понимаю, как мне передать его с помощью js с формой.

Обработчик у меня будет будет php , форма на все товары одна.

[Danil Sapegin]

<div id="window">
  <div class="cover"></div>
  <div class="modal">
    <div class="content-win">
      <h3>Оформление заказа </h3>
      <form method='POST'>
        <input type="hidden" name="id" value="">
        <input type="text" placeholder="Ваше имя">
        <input type="text" placeholder="Ваш номер телефона">
        <button id='but-win' type='submit'>Заказать</button>
      </form>
    </div>
  </div>
</div>

<script>
// open modal
var wrap = $('#window'),
     btn = $('.open-modal-btn'),
     modal = $('.cover, .modal, .content-win');

btn.on('click', function() {
  var id = $(this).data("id");
  modal.find("input[type=hidden]").val(id);
  modal.fadeIn();
});

// close modal
$('.modal').click(function() {
  wrap.on('click', function(event) {
    var select = $('.content-win');
    if ($(event.target).closest(select).length)
      return;
    modal.fadeOut();
    wrap.unbind('click');
  });
});
</script>

и дальше в php через $_REQUEST ловите значения формы

[Дмитрий Беляев]

Danil Sapegin, поправьте ошибку в селекторе "input[type=hidden]"
ну и искать, я думаю, логичнее по "input[name=id]"

[thedimadima]

Danil Sapegin, Дмитрий Беляев, большое спасибо!