This script was made by my friend, but he is unavailable at the time being to go to for some help, so I'd see if I could get some here. I know only of HTML + CSS

Let me lay out a bit of the code I have.

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

further down the page

<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" />

Instead of using a dropdown, how can I use an image as an option to select, for instance:

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

I'd like to be able to select an image and get the value and forward it to the $prod variable.

I have had a look around, and found things such as this /

But without a decent knowledge of JavaScript or PHP, I'm struggling badly. Any suggestions?

This script was made by my friend, but he is unavailable at the time being to go to for some help, so I'd see if I could get some here. I know only of HTML + CSS

Let me lay out a bit of the code I have.

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

further down the page

<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" />

Instead of using a dropdown, how can I use an image as an option to select, for instance:

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

I'd like to be able to select an image and get the value and forward it to the $prod variable.

I have had a look around, and found things such as this http://jsfiddle/9rFKB/

But without a decent knowledge of JavaScript or PHP, I'm struggling badly. Any suggestions?

• javascript
• php
• css
• forms
• variables

2 Answers 2

<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 element doesn't have any property value. Hence need to use id or name.

at the server side after the form is submitted you can fetch the value of prod as follows-

$prod=$_REQUEST['prod'];

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) 

});

fiddle link

explanation: js/jquery catches the click on all img in #thumbs

then removes all highlight effects and adds to the specific one,

then it takes the image $this and gets it id value, it splits it at the - symbol and takes the scondpart (the value) and sets the value of <input type="hidden" name="prod"> to it.

you dont have to change any php, since <input type="hidden" name="prod"> sends to $_POST['prod'] the name attribute does the trick

if you use the fiddle version, just remove the alert line... its just for debug reasons since js doesn't provide proper debug mechanisms