Question

在我的页面中，我有很多包含产品信息的div。这些产品div由mySQL提供的数据构成。当用户想要了解有关产品的更多信息时，它会点击想要的产品并弹出fancybox表单，准备填写他的详细信息，然后在提交时我们将通过电子邮件获取。

#xam div实际上是带有文本框的表单。我的问题是如何通过让我们将所选产品的$row['title']说成fancybox表单中隐藏的文本框？

这是打开fancybox的jquery

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

以下是我触发表单的方式

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

此处是用户点击＆＃34;向我们发送电子邮件时打开的表单＆＃34;通过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>

Answer 1

您需要将产品的数据放在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中，您可以使用此行

使用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>

编辑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); });

如何将php变量传递给fancybox表单？

1 个答案: