Leaderboard

I don't know what gap you refer to but the line of code you posted needs changing to <?php echo '<pre>'; print_r($_POST, true); echo '</pre>'; ?> ^^^^ The "true" ( or you can use '1') prevents print_r() from returning a value after it has output the array. Ignore - as it was all on one line I assumed it was all one statement. But as print_r() is a debugging tool, why don't you just remove the line?

I'd suggest using the same markup with the radio buttons as the example. Just setup your secondary image display instead of using the borders. Updating the secondary image needs to be done with JavaScript, but it a relatively simple change event listener for the group of radio buttons. window.addEventListener('DOMContentLoaded', () => { const preview = document.getElementById('changeToPreview'); document.querySelector('.color-chooser').addEventListener('change', (e) => { const input = e.target; const img = input.parentElement.querySelector('img'); preview.src = img.src; }); }); Updated example.

The radio buttons do not have to be visible, you can hide them and just have a label (which is your image) activate the associated radio. I put together an example. <input type="radio" name="color" value="black" id="black"> <label for="black"> <img src="black.png" alt="black"> </label> You can use CSS to display a border around whichever image is selected, and if you add a class to indication the current one, use a different border to indicate the current item. In my example above, the selected item has a white border, the current has a yellow border.

Try <img src="btn/colorpicker/darkred.png" onClick= "document.forms[0].name_pref.value = 'darkred'" class="pointer clrimg"> <img src="btn/colorpicker/yellow.png" onClick= "document.forms[0].name_pref.value = 'yellow'" class="pointer clrimg"> <img src="btn/colorpicker/purple.png" onClick= "document.forms[0].name_pref.value = 'purple'" class="pointer clrimg"> <input type="text" name="name_pref" style="font-size: 24px;" value="">