Question

这个剧本是由我的朋友制作的，但他暂时不能去寻求帮助，所以我看看能不能在这里找到一些。我只知道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的正确认识，我就会挣扎得很厉害。有什么建议吗？

Answer 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>

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

提交表单后，在服务器端

，您可以按如下方式获取prod的值 -

$prod=$_REQUEST['prod'];

Answer 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捕获click中所有img的{{1}}

然后删除所有高光效果并添加到特定效果

然后它获取图像#thumbs并获取它$this值，它将其分割为id符号并获取scondpart（值）并设置{{1}的值对它来说。

你不必更改任何php，因为-发送到<input type="hidden" name="prod"> <input type="hidden" name="prod">属性可以解决问题

如果您使用小提琴版本，只需删除警报线...它只是出于调试原因，因为js没有提供正确的调试机制

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

2 个答案: