Как передать переменную php в форму fancybox?

0

На моей странице у меня много div, которые содержат информацию о продуктах. Эти div продукта построены по данным, полученным из mySQL. Когда пользователь хочет получить больше информации о продукте, он нажимает на тот, который хочет, и появляется форма fancybox, готовая заполнить его данные, и мы отправим их по электронной почте.

#xam div на самом деле является формой с текстовыми полями в основном. Мой вопрос заключается в том, как я могу передать let $row['title'] выбранного продукта в скрытое текстовое поле в форме fancybox?

вот jquery, который открывает fancybox

    $(".modalbox").fancybox({
    'closeBtn' : false
    });

вот как я запускаю форму для показа

<a class="modalbox" href="#xam">
<div>
a small div that contains few info about a product that when it clicked it opens the #xam div where a user can put his email to get more info from us
</div>
</a>

вот форма, которая открывается, когда пользователь нажимает ссылку "email us" на fancybox

UPDATE. this is the code of xam



<div id="xam">
    <div id="reservation-form" class="block">
        <div class="block-inner white block-shadow">
            <form id="contact" name="contact" action="#" method="post">
                <label for="phone">Phone<span class="required"></span></label>
                <input id="phone" name="phone" class="form-control" type="text" value="" size="30">
            <button id="send">send</button>
            </div>
        </div>
    </form>
</div>
  • 0
    Просто echo $row['title'] куда бы ни направлялось значение.
Теги:

1 ответ

0

Вам нужно поместить данные продукта в атрибут html data-attribute. Например:

<div id="products">
    <ul>
        <?php foreach ($products as $row) : ?>
        <li>
            <div data-title="<?=$row['title'];?>" data-id="<?=$row['id'];?>" data-etc="">
                This is product <?=$row['title'];?>
                <a class="action-xam">Click me</a>
            </div>
        </li>
        <?php endforeach; ?>
    </ul>
</div>

Теперь в javascript вы можете получить доступ к данным data-info с помощью jQuery, используя эту строку

var title = $(this).data("title"); //This being the selected product

Это означает, что вы можете сделать что-то вроде этого:

$(".action-xam").click(function(){
    var title = $(this).prev("div").data("title"); //This being the selected product
    //Do something with title, like putting it inside #xam
    //$("#xam something").text(title);
});

Обратите внимание, что вы можете поместить атрибут данных в любом месте, даже в <a>Click me</a> где пользователь нажимает.

РЕДАКТИРОВАТЬ

Когда пользователь нажимает на продукт:

$(".action-xam").click(function(){
    //Get some info like the title
    var title = $(this).prev("div").data("title");
    //Insert the info into xam
    $("#xam-product-title").val(title);
});

И вам нужно, чтобы xam имел скрытый ввод

<form id="contact" name="contact" action="#" method="post">
    <label for="phone">Phone<span class="required"></span></label>
    <input id="phone" name="phone" class="form-control" type="text" value="" size="30">

    <input id="xam-product-title" value="" name="product-title" type="hidden">

    <button id="send">send</button>
</form>

EDIT 2

Добавьте к классу action-xam ко всему <a class="modalbox action-xam" href="#xam"> и поставьте это:

$(".action-xam").click(function(){
    //Get some info like the title
    var title = $(this).next("div").data("title");  //Prev or next, try to get the data-attribute with some jQuery. Should be easy with console.log
    //Insert the info into xam
    $("#xam-product-title").val(title);
});
  • 0
    Спасибо за это, я пытаюсь это сделать, но мне сложно реализовать его в моем реальном jQuery, который загружает форму #xam $(".modalbox").fancybox({ 'closeBtn' : false });
  • 0
    Дайте больше HTML-кода (внутри xam и javascript, который открывает xam), чтобы я мог попытаться реализовать его. Или сделайте jsfiddle.
Показать ещё 9 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню