0

Есть страница категории товаров. У каждого есть ID - product ['id'], название - product['name'], цена - product['price']. У каждого товара есть кнопка <button class="opener"> </button>

Есть html форма, в которую нужно передать название товара и его цену.

Есть скрипт на jquery - использующий какую-то стандартную библиотеку "dialog", который скрывает форму до момента нажатия на кнопку и открывает после нажатия.

Задача: при нажатии на кнопку открывается форма во всплывающем окне, и в соответствующие поля формы записываются значения цены и названия.

Привожу код(с купюрами для экономии места):

Продукт:

<?php foreach ($products as $product) { ?>
<div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
  <div class="price"> 

        <?php if (!$product['special']) { ?>
        <span class="regprice"><?php echo $product['price']; ?></span>
        <?php } else { ?>
        <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
        <?php } ?>
</div>
<button class="opener">Кнопка</button>

Jquery:

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
      <script> 
  $( function() {
      $( "#form" ).dialog({
      autoOpen: false,
      width: 500,
      title: "Форма",
      closeText: "",
      show: {
        effect: "blind",
        duration: 500
      },
      hide: {
        effect: "blind",
        duration: 500
      }
    }); 

   }


    $( ".opener" ).on( "click", function() {
      $( "#form" ).dialog( "open");
    });
  } );
  </script>

Форма:

<div id="form">
<form action="http://example.com/action.php" method="post">
<input name="itemName" value="##здесь должно быть имя товара##" type="hidden"/>
<input name="itemQuantity" value="1" type="hidden"/>
<input name="itemPrice" value="##Здесь должна быть цена товара##" type="hidden"/>
<input type="submit" value="Submit"/>
</form>
</div>     

2 ответа 2

0

В данном случае нужно руками проставить значения при отркытии окна, используй селектор по имени, вот пример.

$( ".opener" ).on( "click", function() {
  $( "input[name='itemName']" ).val( "Твое наименование" );
  $( "input[name='itemPrice']" ).val( "Твоя цена" );
  $( "#form" ).dialog( "open");
});

Но лучше испольвать поиск не по имени, а по классу или ID.

<input class="itemName" type="hidden"/>

Или

<input id="itemName" type="hidden"/>
4
  • Проблема в том откуда взять эту .val( "Твое наименование" ). Ведь товаров то на странице много. Я сейчас временно добавил в каждый товар и форму и jquery с открывашкой и поставит классам формы и кнопки id товара, примерно так :class="opener<?php echo product['id'];?>" Но как по мне не очень изящное решение плодить 50 скрытых форм на странице и 50 идентичных скриптов 12 мар 2018 в 8:39
  • Понял. Записывай значения прямо в твой элемент в data атрибут.
    – Rim4i4ok
    12 мар 2018 в 8:47
  • Может я что-то не понял в ответе или вопрос не совсем полно задал. Нужно, чтобы форма и скрипт были в единичном экземпляре на странице. А при клике на кнопку конкретного товара в форму подставлялись значения именно этого товараю 12 мар 2018 в 8:47
  • Могу я попросить поподробнее объяснить, если не трудно. 12 мар 2018 в 8:48
0

При отрисовке всех элементов сохраняй их необходимые значения в data атрибуты, вот документация и здесь.

<div class="item" data_name="Записываем имя" data_price="Записываем стоимтость"/>

А в при нажатии кнопки забирай значения из текущего элемента c помощью js.

$(".item").click(function(){
   var name = $(this).data("name");
   var price = $(this).data("price");
});
1
  • Спасибо. Присвоил кнопке атрибуты data с ценой и названием. В скрипте всплывашки к ним обращаюсь и подставляю в форму, как ты показал ранее. Вроде бы все корректно работает. 12 мар 2018 в 9:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.