在具有值的表单中使用图像作为选项

Posted 2023-02-24

【中文标题】在具有值的表单中使用图像作为选项

【英文标题】：Using an image as an option inside a form with a value

【发布时间】：2014-01-10 16:11:53

【问题描述】：

这个脚本是我朋友写的，但他暂时没空去寻求帮助，所以我想看看能不能在这里得到一些。我只知道 html + CSS

让我列出一些我拥有的代码。

$prod = $_POST['prod'];
header("Location: inc/paypal.php?username=". $username ."&prod=". $prod);

页面下方

<input type="text" value="<?php echo $data['username']; ?>" name="username" disabled>
<form method="post">
 <select name="prod">
  <option value="1">Product 1 - $1.00</option>
  <option value="2">Product 2 - $19.99</option>
  <option value="3">Product 3 - $29.99</option>
  <option value="4">Product 4 - $39.99</option>
  <option value="5">Product 5 - $49.99</option>                  
 </select>
</form>
<input type="submit" name="submit1" value="Pay Via PayPal" />

我怎样才能使用图像作为选项来选择，而不是使用下拉菜单，例如：

<div id="img_display">
 <img src="img/product-1.png" value="1">
 <img src="img/product-2.png" value="2">
 <img src="img/product-3.png" value="3">
</div>

我希望能够选择图像并获取值并将其转发到 $prod 变量。

我环顾四周，发现了这样的东西 http://jsfiddle.net/9rFKB/

但如果没有良好的 javascript 或 PHP 知识，我的处境就很艰难。有什么建议吗？

【参考方案1】：

<input type="hidden" name="prod" id="prod">
<div id="img_display" onclick="document.getElementById('prod').value=event.target.name">
 <img src="1.jpg" name="1">
 <img src="1.jpg" name="2">
 <img src="1.jpg" name="3">
</div>

注意img 元素没有任何属性 value。因此需要使用id 或name。

在服务器端提交表单后，您可以获取prod的值，如下所示-

$prod=$_REQUEST['prod'];

【参考方案2】：

html:

<form>
    <input type="hidden" name="prod"> 
    <div id="thumbs">
        <!-- Dynamically created thumbnails start -->
        <img id="pic-1" src="url">
        <img id="pic-2" src="url">
        <img id="pic-3" src="url">
        <!-- Dynamically created thumbnails end -->
    </div>
</form>

js:

$('#thumbs').delegate('img', 'click', function() 

    var $this = $(this);
    // Clear formatting
    $('#thumbs img').removeClass('border-highlight');

    // Highlight with coloured border
    $this.addClass('border-highlight');

    // Changes the value of the form field "prod" to the value of img.id
    $('[name="prod"]').val( $this.attr('id').substring($this.attr('id').lastIndexOf('-')+1) 

);

小提琴link

解释： js/jquery 在#thumbs 中的所有img 上捕获click

然后移除所有高亮效果并添加到特定的，

然后它获取图像$this 并获取它的id 值，它在- 符号处将其拆分并获取scondpart（值）并将<input type="hidden" name="prod"> 的值设置为它。

您不必更改任何 php，因为 <input type="hidden" name="prod"> 发送到 $_POST['prod'] name 属性可以解决问题

如果您使用小提琴版本，只需删除警报行...这只是出于调试原因，因为 js 不提供适当的调试机制

【讨论】：

你能做个小提琴演示一下吗？

啊，我明白了，但是如何将ID 的值转发到$prod = $_POST['prod']; 中的变量$prod？

<input type="hidden" name="prod"> name 参数链接到$_POST['prod']

精彩的解释。

我使用了她发现的内容并对其进行了调整... ofc 你的解决方案更简单；）