Member Avatar for nea_m

Hello all,
Im trying to display an image to the right side of radio buttons. I kind of did it, but my OK button is too low now, which means I must have put this echo code in the middle of the radio button list or something.

Im an absolute php newbie and Ive been tryig to resolve this for some time now, but I just dont see what Im doing wrong... Can anyone help, please? Im posting my code... Thanx in advance.

<?php
if(isset($_REQUEST["submit"]));{
$choice=$_REQUEST["choice"];
echo "Voce koje ste izabrali: $choice";
}
$img=array("ananas"=>array("ananas","pineapple.jpg"), "jagode"=>array("jagode","strawberries.jpg"), "visnje"=>array("visnje","bcherries.jpg"), "lubenica"=>array("lubenica","watermelon.jpg"), "mandarine"=>array("mandarine","mandarines.jpg"), "limun"=>array("limun","lemon.jpg"), "mango"=>array("mango","mango.jpg"));
?>

<div class="b" align="left" style="padding-left:15px;">

<form name="vocnaforma" method="POST" >
<b><i>Izaberite voce po zelji:</i></b>
<br>
<?php
foreach($img as $k=>$v){
echo "<input type='radio' name='choice' value='$k'";
if($k==$choice){
$imgsrc=$v[1];
echo 'checked="checked"';
}
echo "> $v[0] <br/>";
}
echo "<table align='center'><tr><td><img src=$imgsrc  height='95'></td></tr></table>";
?>
<button name="submit" type="submit" > OK </n>
</form>

</div>
  • 2 Contributors
  • 2 Replies
  • 262 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by nea_m

Dani AI

Generated

A few quick, practical points that will fix the layout problem and make the code robust.

The usual culprits here are HTML errors, not PHP logic. In the code shown by there are three easy-to-miss bugs that break the generated HTML: a stray semicolon after the if(...) (so the conditional block runs incorrectly), a malformed/uncLOSED submit element (that will swallow following markup), and an unquoted or unset src value for the <img> tag. 's idea of separating controls and the image into two columns is sound — prefer a simple CSS layout (flex or float) over nesting everything in a centered table.

Suggested fixes and a minimal pattern to follow:

  • Remove the stray semicolon after the if condition and make sure the if block is properly formed.
  • Only render the <img> when you have a valid source (avoid undefined variables).
  • Quote the src attribute and escape user values with htmlspecialchars.
  • Close the button tag properly (for example, </button>), or use a correctly-formed submit input.
  • Put radios and the preview image in the same wrapper so CSS can place them side-by-side.

Example pattern (replace the placeholder map with your image filenames):

<?php
$choice = $_POST['choice'] ?? '';
if (isset($_POST['submit'])) {
    echo 'You selected: ' . htmlspecialchars($choice);
}
$images = ['apple'=>'apple.jpg','orange'=>'orange.jpg']; // placeholder
?>
<form method="post">
  <div class="wrap">
    <div class="left">
<?php
foreach ($images as $key => $file) {
    $checked = ($key === $choice) ? ' checked' : '';
    echo "<label><input type=\"radio\" name=\"choice\" value=\"$key\"$checked> $key</label><br>\n";
}
?>
      <button type="submit" name="submit">OK</button>
    </div>
    <div class="right">
<?php if ($choice && isset($images[$choice])): ?>
      <img src="<?php echo htmlspecialchars($images[$choice]); ?>" height="95" alt="">
<?php endif; ?>
    </div>
  </div>
</form>

CSS to place the image to the right:

.wrap { display:flex; align-items:flex-start; gap:16px; }
.left { flex:0 0 220px; }
.right img { display:block; max-height:95px; }

Troubleshooting: view the page source or use browser devtools to find unclosed tags, temporarily remove the image output to see if the button returns to normal, and enable PHP error display to catch undefined-variable notices.

Recommended Answers

All 2 Replies

Member Avatar for humbug

Ok, first off, W3schools recommend you use <input type="submit" ... /> tags inside forms for consistency across browsers. http://www.w3schools.com/tags/tag_button.asp (And what's with the </n> tag?)

So what exactly are you trying to achieve? Do you want the image next to the checked radio button only or just to the right of the whole list? You usually get flamed down for using tables to try and arrange the page how you want it so best not to use it like you are. (This is really an html problem..)

I would suggest maybe using a table with two td's, one for the radio buttons (and maybe the ok button) and one for the image, if that's what your after.

Member Avatar for nea_m

Hi,

Thanx for the reply. What Im trying to do is -display an image next to the whole radio button list, depending on what button is clicked. I will try your suggestin and will let you know if I succeeded. Cheers :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.