0

附件是我正在尝试编码的页面的一部分的屏幕截图。我希望用户能够单击图像并记录该选择，然后将其发送给我，以便我知道他们最喜欢哪种设计。

我不希望用户输入任何内容，只需单击图像并发送表单。我将使用 jQuery 在“您选择...”部分显示用户选择，但我完全不确定如何将他们的选择记录在表单中，以便在他们按下提交后通过电子邮件发送结果按钮。

我有许多这些部分和图像供用户选择。我知道我可以简单地在每个图像下方放置一个单选按钮，但是有没有一种方法可以不使用单选按钮，只需单击图像本身就可以记录他们的选择？也许是单选按钮和图像的组合？

谢谢。在此处输入图像描述

4

5 回答 5

3

像这样 ：

<img class="bamBoum" src="blabvla.jpg" alt="" title="" data-id="1" />

var prefImage = 0;
$('.bamBoum').click(function(e){
    e.preventDefault();
    prefImage = $(this).attr('data-id');

    alert(prefImage)
});

当您“提交”页面时，只需查看变量。

当然，您必须记住您的网页需要 Javascript 才能工作。您也可以使用变量填充隐藏字段，因此当您提交表单时，您可以在另一侧看到结果。

于 2012-07-06T17:38:33.343 回答
1

有很多方法。您可以使用您提到的收音机，但只需隐藏它们。只要记住将可见性设置为隐藏，或绝对定位在屏幕之外；usingdisplay: none实际上不会将它们的值与表单一起提交，从而违背了目的。

或者，您可以使用隐藏的输入，并将选定的选项存储在其中。

或者，如果您不介意在他们选择后立即提交表单，您甚至可以使用<input type="image">，为每个表单赋予相同的名称，但具有唯一值。这可能不是最好的方法，但它在技术上是一种方法。

于 2012-07-06T17:39:17.997 回答
0

您可以在提交表单之前使用选择的值填充隐藏字段。

于 2012-07-06T17:35:49.010 回答
0

根据您需要支持的浏览器，这可能是使用ol' checkbox hack的好地方。您将使用收音机而不是复选框。

于 2012-07-06T17:36:41.413 回答
0

如果您使用$.post()，那么您可以使用变量而不是输入字段来构建您的帖子数据。

要查找选择了哪一个，您可以通过查找哪个具有相应的选定类来执行此操作，或者在事件.data()期间使用存储最后一个选定的类来执行此操作。click()

于 2012-07-06T17:38:52.717 回答