javascript - Using an image as an option inside a form with a value

309

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.net/9rFKB/

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

171

Answer

Solution:

<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 propertyvalue. Hence need to useid orname.

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

$prod=$_REQUEST['prod'];
168

Answer

Solution:

html:

{-code-1}

js:

{-code-2}

f{-code-7}dle link

explanation: js/jquery catches the{-code-3} on all{-code-4} in{-code-5}

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

then it takes the image{-code-6} and gets it{-code-7} value, it splits it at the- symbol and takes the scondpart (the value) and sets the value of<input type="h{-code-7}den" name="prod"> to it.

you dont have to change any php, since<input type="h{-code-7}den" name="prod"> sends to$_POST['prod'] thename attribute does the trick

if you use the f{-code-7}dle version, just remove the alert line... its just for debug reasons since js doesn't prov{-code-7}e proper debug mechanisms

People are also looking for solutions to the problem: php - PPT to Image Converting Concept

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.