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 that you have read and understand our privacy policy and code of conduct.

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