...

View Full Version : PHP image as radio button....



paraleadogg
12-04-2008, 08:31 PM
Hi guys,

I am a noob to php and i have seen similar answers to this elsewhere but nothing that really fits exactly what I am looking for.

Basically i have a form.

I want to have images on that fom that act like radio buttons.

These will be coloured squares to allow the user to click one to select a colour.

I want the user to actually click the image - not a radio button next to it.

So i dont want the little radio button "nipple" visible...

Just the image - when it is clicked the image is highlighted (changes colour, has a border - whatever)

and when a submit button is clicked the value of the selected image is used in the form submission.....

So if blue image is chosen the word "Blue" is passed when the submit is clicked - the word "blue" will then be used as part of a mysql query....

So -any idea of the best way of doing this??

So far all i have seen is radio buttons with an image next to them......

Thanks in advance for any thoughts, help

Robi

devinemke
12-04-2008, 08:51 PM
you could do something like...


<form action="" method="post">
<input type="image" name="color" value="red" src="red.gif">
<input type="image" name="color" value="white" src="white.gif">
<input type="image" name="color" value="blue" src="blue.gif">
</form>

<?php
if (isset($_POST['color'])) {echo 'you clicked ' . $_POST['color'];}
?>

paraleadogg
12-04-2008, 09:16 PM
you could do something like...


<form action="" method="post">
<input type="image" name="color" value="red" src="red.gif">
<input type="image" name="color" value="white" src="white.gif">
<input type="image" name="color" value="blue" src="blue.gif">
</form>

<?php
if (isset($_POST['color'])) {echo 'you clicked ' . $_POST['color'];}
?>


Yes - that is along the right lines but that posts the value as soon as the image is clicked.

I just want it to act as a radio button and send the value once the submit button is clicked....

devinemke
12-04-2008, 09:59 PM
<html>
<head>
<title>change color</title>

<script type="text/javascript" language="javascript">
function change_color(color)
{
document.getElementById('form_tag').action += color;
document.getElementById(color).border = 5;
}
</script>

<style type="text/css">
body {background-color: <?php echo $_GET['color']; ?>;}
</style>

</head>
<body bgcolor="white">

<form action="test.php?color=" method="post" id="form_tag">
choose color and then hit submit:<br><br>
<a href="javascript:change_color('red');"><img src="red.gif" id="red" alt="red" border="2" width="100" height="50"></a><br><br>
<a href="javascript:change_color('green');"><img src="green.gif" id="green" alt="green" border="2" width="100" height="50"></a><br><br>
<a href="javascript:change_color('yellow');"><img src="yellow.gif" id="yellow" alt="yellow" border="2" width="100" height="50"></a><br><br>
<input type="submit" name="submit" value="submit">
</form>

<?php
if (isset($_GET['color'])) {echo 'you selected ' . $_GET['color'];}
?>

</body>
</html>

paraleadogg
12-04-2008, 10:20 PM
<html>
<head>
<title>change color</title>

<script type="text/javascript" language="javascript">
function change_color(color)
{
document.getElementById('form_tag').action += color;
document.getElementById(color).border = 5;
}
</script>

<style type="text/css">
body {background-color: <?php echo $_GET['color']; ?>;}
</style>

</head>
<body bgcolor="white">

<form action="test.php?color=" method="post" id="form_tag">
choose color and then hit submit:<br><br>
<a href="javascript:change_color('red');"><img src="red.gif" id="red" alt="red" border="2" width="100" height="50"></a><br><br>
<a href="javascript:change_color('green');"><img src="green.gif" id="green" alt="green" border="2" width="100" height="50"></a><br><br>
<a href="javascript:change_color('yellow');"><img src="yellow.gif" id="yellow" alt="yellow" border="2" width="100" height="50"></a><br><br>
<input type="submit" name="submit" value="submit">
</form>

<?php
if (isset($_GET['color'])) {echo 'you selected ' . $_GET['color'];}
?>

</body>
</html>



hey - thanks devinemke

Thats much closer!! Good work!!

The only problem with that is when you select one colur if you select another the first remains selected.

So i need to work out how to allow only one choice - so if a user clicks red...but then changes their mind and clicks blue....only "blue" is submitted when the submit button is clicked

Am guessing this will be javascript? Maybe on the onclick event?

Also - I would prefer it to do a post rather than get?

As i dont want to pass this infomationin the URL

devinemke
12-04-2008, 10:37 PM
this one uses whatever color was selected last before hitting submit (much like a radio button would behave) and uses a hidden POST var rather than a GET var


<html>
<head>
<title>change color</title>

<script type="text/javascript" language="javascript">
function change_color(color)
{
document.getElementById('color').value = color;
}
</script>

<style type="text/css">
body {background-color: <?php echo $_POST['color']; ?>;}
</style>

</head>
<body bgcolor="white">

<form action="" method="post">
choose color and then hit submit:<br><br>
<a href="javascript:change_color('red');"><img src="red.gif" id="red" alt="red" border="2" width="100" height="50"></a><br><br>
<a href="javascript:change_color('green');"><img src="green.gif" id="green" alt="green" border="2" width="100" height="50"></a><br><br>
<a href="javascript:change_color('yellow');"><img src="yellow.gif" id="yellow" alt="yellow" border="2" width="100" height="50"></a><br><br>
<input type="submit" name="submit" value="submit">
<input type="hidden" name="color" value="" id="color">
</form>

<?php
if (isset($_POST['color'])) {echo 'you selected ' . $_POST['color'];}
?>

</body>
</html>

paraleadogg
12-04-2008, 10:55 PM
this one uses whatever color was selected last before hitting submit (much like a radio button would behave) and uses a hidden POST var rather than a GET var


<html>
<head>
<title>change color</title>

<script type="text/javascript" language="javascript">
function change_color(color)
{
document.getElementById('color').value = color;
}
</script>

<style type="text/css">
body {background-color: <?php echo $_POST['color']; ?>;}
</style>

</head>
<body bgcolor="white">

<form action="" method="post">
choose color and then hit submit:<br><br>
<a href="javascript:change_color('red');"><img src="red.gif" id="red" alt="red" border="2" width="100" height="50"></a><br><br>
<a href="javascript:change_color('green');"><img src="green.gif" id="green" alt="green" border="2" width="100" height="50"></a><br><br>
<a href="javascript:change_color('yellow');"><img src="yellow.gif" id="yellow" alt="yellow" border="2" width="100" height="50"></a><br><br>
<input type="submit" name="submit" value="submit">
<input type="hidden" name="color" value="" id="color">
</form>

<?php
if (isset($_POST['color'])) {echo 'you selected ' . $_POST['color'];}
?>

</body>
</html>



Much respect!! This is exactly what I needed.....

One last thing - as I am a total NOOOOB

If I wanted to change the image?? when it was selected?? to highlight it?

(so swap it for a darker image or place a tick on it or something)

So that the user could see that it was selected?

Would this be difficult??

The border thing is no longer working

I tried re-adding the

document.getElementById('color').border = 5;

to the javascript function but it didnt work??

But if I could show another image when it was selected then that would be even better and EXACTLY what I was looking for

Once again thanks for your help

Much appreciated

Robi



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum