На моей странице у меня много 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>
Вам нужно поместить данные продукта в атрибут 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);
});
$(".modalbox").fancybox({ 'closeBtn' : false });
echo $row['title']
куда бы ни направлялось значение.