Processing the value of the group of radio buttons that uses images

advertisements

I have a simple form that uses a radio button group. To the right of each radio button is an image depicting a season - Winter, Spring, Summer, Fall. Users are asked to click a radio button to select a season. The HTML and CSS for this are given next:

form.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Radio Button Group</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<form action="processpicture.php" method="post">
<fieldset>
<legend>Choose a Picture. Type a Caption.</legend>
<p><label>Picture:</label>
<input type="radio" name="picture" id="Winter" value="winter" checked="checked" />
<label for="winter"><img src="images/winter.jpg" alt="Winter" /></label>
<input type="radio" name="picture" id="Spring" value="spring" checked="checked" />
<label for="spring"><img src="images/spring.jpg" alt="Spring" /></label>
<input type="radio" name="picture" id="Summer" value="summer" checked="checked" />
<label for="summer"><img src="images/summer.jpg" alt="Summer" /></label>
<input type="radio" name="picture" id="Autumn" value="autumn" checked="checked" />
<label for="autumn"><img src="images/autumn.jpg" alt="Autumn" /></label></p>
<p><label for="caption">Caption:</label>
<input type="text" name="caption" id="caption" maxlength="30" size="30" /></p><p><button type="submit">Build the Picture</button></p>
</fieldset></form></body></html>


style.css:

form{width:800px;}
label{display:inline-block; width:130px; font-weight:bold;}
button{border:1px solid #666; background:#29F398; display:block; margin-left:135px;}
img{width:100px; height: 100px;}
.highlight{font-weight: bold; color: #ffa500;}


I need the PHP script to process the radio button group and display the image chosen by the user. Something like:

Here is your captioned image: [image with caption displayed here]

processpicture.php:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <meta charset="UTF-8">
        <title>Procesing Picture Script</title>
    </head>
<body>
<?php
$picture = $_POST['picture'];
$caption = $_POST['caption'];
echo "<h1>Picture Results</h1>";
echo "<p>You selected the following options:</p>";
echo "<ul><li>Picture: <span class=\"highlight\">$picture</span></li>
<li>Caption: <span class=\"highlight\">$caption</span></li></ul>";
echo "Here is your captioned image:<br><br>";
echo "$picture";
echo "<br><br>$caption</p>";
echo "<p><a href=\"form.html\">Try another picture</a>";

?>
</body>
</html>


When I run the code the word "Winter" and not the image of Winter is being displayed. Is it possible to display the image according to the radio button chosen and not display the text using PHP? Any help would be great, thanks Andy ;-)


Well first off your form will only ever send the text value of your radio so $picture in processpicture.php will always be text. Secondly, to show an image you need to use an img tag like you have used in form.html.

One way to do this would be to set the values of your radios to match the srcs of the images next to them and use that in processpicture.php within am img tag. Like so -

form.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Radio Button Group</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
  <form action="processpicture.php" method="post">
    <fieldset>
      <legend>Choose a Picture. Type a Caption.</legend>
      <p>
        <label>Picture:</label>
        <input type="radio" name="picture" id="Winter" value="images/winter.jpg" checked="checked" />
        <label for="winter">
          <img src="images/winter.jpg" alt="Winter" />
        </label>
        <input type="radio" name="picture" id="Spring" value="images/spring.jpg" checked="checked" />
        <label for="spring">
          <img src="images/spring.jpg" alt="Spring" />
        </label>
        <input type="radio" name="picture" id="Summer" value="images/summer.jpg" checked="checked" />
        <label for="summer">
          <img src="images/summer.jpg" alt="Summer" />
        </label>
        <input type="radio" name="picture" id="Autumn" value="images/autumn.jpg" checked="checked" />
        <label for="autumn">
          <img src="images/autumn.jpg" alt="Autumn" />
        </label>
      </p>
      <p>
        <label for="caption">Caption:</label>
        <input type="text" name="caption" id="caption" maxlength="30" size="30" />
      </p>
      <p>
        <button type="submit">Build the Picture</button>
      </p>
    </fieldset>
  </form>
</body>

</html>

processpicture.php

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <meta charset="UTF-8">
  <title>Procesing Picture Script</title>
</head>

<body>
  <?php
    $picture=$ _POST[ 'picture'];
    $caption=$ _POST[ 'caption'];
    echo "<h1>Picture Results</h1>";
    echo "<p>You selected the following options:</p>";
    echo "<ul><li>Picture: <span class=\"highlight\ "><img src=\"$picture\" /></span></li>
<li>Caption: <span class=\"highlight\ ">$caption</span></li></ul>";
    echo "Here is your captioned image:<br><br>";
    echo "<img src="$picture" />";
    echo "<br><br>$caption</p>";
    echo "<p><a href=\"form.html\ ">Try another picture</a>"; ?>
</body>

</html>

However if you want to show the season name and the season picture then you could leave your radio's as they are and use a switch statement (I'm assuming PHP has them; I've not really used PHP myself) and a second variable to store the image src.