Как вывести название товара?

Нужно в модальном окне вывести название товара. Вывожу товары так:

if (!empty($_GET['id'])) { 
    $sql = 'SELECT * FROM sell WHERE id='.intval($_GET['id']).' LIMIT 1'; 
    if ($result = mysqli_query($link, $sql)) { 
        $row = mysqli_fetch_assoc($result); 
        $name = $row['name']; $id = $row['id']; 
        mysqli_free_result($result); 
    } 
} 

while($row = $result->fetch_assoc()) {
    echo "<div><div class='popular-box'><div class='title'>" 
         . $row["name"] 
         . "<span>" 
         . $row["description"] 
         . "</span></div>"
         . "<div class='img'><img src='" 
         . $row["img"] 
         . "'></div>"
         . "<div class='price'>" 
         . $row["price"] 
         . " руб</div>"
         . "<a href='#modal-order' data-toggle='modal'><span class='pe-7s-cart'></span></a></div></div>";
}

Здесь кнопка вызова модального окна с формой для заказа:

<a href='#modal-order' data-toggle='modal'><span class='pe-7s-cart'></span></a>

Вот код модального окна с формой, куда мне надо вывести название товара (пытаюсь вывести так:<?php echo $name; ?>, но оно не выводится).

<div id="modal-order" class="modal fade" role="dialog">
<div class="modal-dialog call_modal">
    <div class="modal-content">
        <form id="form-order">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>

                <h4 class="modal-title">Оформить заказ на <?php echo $name; ?></h4>
                <p class="after-modal-title text-center">Оставьте свои данные и наши менеджеры свяжутся с вами для уточнения деталей</p>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <input type="text" name="name" class="form-control" placeholder="Ваше имя" required>
                </div>
                <div class="form-group">
                    <input type="email" name="email" class="form-control" placeholder="Ваш E-mail" required>
                </div>
                <div class="form-group">
                    <input type="text" name="phone" class="form-control phone-mask" placeholder="+7 (999) 999-99-99" required>
                </div>
                <input type="hidden" name="formData" value="Оформление заказа">
                <button type="submit" class="btn main-btn form-btn">Перезвоните мне</button>
            </div>
        </form>
    </div>
</div>

Я так понимаю, что нужно как-то передать id товара, потому что, если открыть страницу по адресу site.ru?id=1 (1 - id товара), то название появится


Ответы (1 шт):

Автор решения: adudnik.ru

Вы можете подставлять в модальную форму название через jQuery без необходимости переписывать php код и логику работы сайта.

Насколько я понимаю у вас много товаров виде строки и всего одно модальное окно для заказа. В нем вы можете динамически менять название через javascript.

Вот сюда добавляете data-name

while($row = $result->fetch_assoc()) {

                        echo "<div><div class='popular-box'><div class='title'>" . $row["name"] . "<span>" . $row["description"] . "</span></div>"
                          . "<div class='img'><img src='" . $row["img"] . "'></div>"
                          . "<div class='price'>" . $row["price"] . " руб</div>"
                          . "<a href='#modal-order' data-toggle='modal' data-name=' . $row["name"] . ' class="modal-name"><span class='pe-7s-cart'></span></a></div></div>";
                      }

Сюда span с id="modal-name"

<div id="modal-order" class="modal fade" role="dialog">
<div class="modal-dialog call_modal">
    <div class="modal-content">
        <form id="form-order">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>

                <h4 class="modal-title">Оформить заказ на <span id="modal-name"></span></h4>
                <p class="after-modal-title text-center">Оставьте свои данные и наши менеджеры свяжутся с вами для уточнения деталей</p>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <input type="text" name="name" class="form-control" placeholder="Ваше имя" required>
                </div>
                <div class="form-group">
                    <input type="email" name="email" class="form-control" placeholder="Ваш E-mail" required>
                </div>
                <div class="form-group">
                    <input type="text" name="phone" class="form-control phone-mask" placeholder="+7 (999) 999-99-99" required>
                </div>
                <input type="hidden" name="formData" value="Оформление заказа">
                <button type="submit" class="btn main-btn form-btn">Перезвоните мне</button>
            </div>
        </form>
    </div>
</div>

И вот такой код на jQuery т.к. у вас bootstrap используется.

$(document).ready(function() {
  $(".modal-name").on("click", function() {
    $("#modal-name").html($(this).data("name"));
  });
});
→ Ссылка