Replacing text field with image and keeping value for database

[PNewCode]

Hello

I have a page where a person can click on an image, and that will show the image name in a text field. That image name is then sent to a php page to enter that value into a database table

What I have below works perfectly for that (not showing all the php stuff because that's not what I need to change)
What I want instead, is to have the image that is selected showing AS the form field, and keeping that same text value to send in the form (so if they choose the green image, it shows the green image, instead of a text field)

So another words, if the user clicks on "Purple" then it will show the Purple.png instead of the text field, and will still retain the value of "purple" to send to the database

I've tried changing the "text" to "Image" and putting the sourse as name-pref, and adding an image tag outside of the form field with making the field hidden but that didn't work

Any thoughts?

 

          <img src="btn/colorpicker/darkred.png" onClick= "document.forms[0].elements['name_pref'].value = 'darkred'" class="pointer clrimg"> 
          <img src="btn/colorpicker/yellow.png" onClick= "document.forms[0].elements['name_pref'].value = 'yellow'" class="pointer clrimg"> 
          <img src="btn/colorpicker/purple.png" onClick= "document.forms[0].elements['name_pref'].value = 'purple'" class="pointer clrimg">


          <input type="text" name="name_pref" style="font-size: 24px;" value="">

 

Edited July 29, 2023 by PNewCode

[Barand]

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="">

 

[PNewCode]

@Barand Thank you, that doesn't work though. That will give another form field. I already have that. I'm trying to replace the field with an image, OR add a place where the selected image will show. Below is a mock image I made to show what I have and what I'm wanting to do instead

______________________________________________________________________________________

[kicken]

Are you set on doing it this way?  You could instead use a set of radio buttons with a highlight around the color selected and eliminate the need for JavaScript.

[PNewCode]

@kicken Yes I'd rather not use radio buttons. I made a version of this with that and it just looked terrible in my opinion. Too much clutter. I've been searching for a way to display the chosen image much like an emoji picker does (only not in a form field) and then have the field hidden to still send the corrent value, but I'm not having any luck with that either

[PNewCode]

I COULD deal with the image appearing inside the form field when clicked, like emojis do, but I'd really like to have it like my example above if that's even possible to do

[kicken]

18 minutes ago, PNewCode said:

Yes I'd rather not use radio buttons. I made a version of this with that and it just looked terrible in my opinion.

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.

 

[PNewCode]

@kicken That is a great approach to this. I think I will be able to use that exact method on a different project I'm working on because that will be very useful for it.
For this project though, I am still looking to have the selection displayed where the field is. I'm thinking there has to be a way somehow. There's a way to show a preview with file selectors but I haven't been able to convert that into picking an image thats already on the page

[kicken]

41 minutes ago, PNewCode said:

I am still looking to have the selection displayed where the field is

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.

[mac_gyver]

here's a different approach -

<?php
echo '<pre>'; print_r($_POST); echo '</pre>';
?>
<img src="btn/colorpicker/darkred.png" data-color='darkred' onClick="pic_color(this)" class="pointer clrimg">
<img src="btn/colorpicker/yellow.png" data-color='yellow' onClick="pic_color(this)" class="pointer clrimg">
<img src="btn/colorpicker/purple.png" data-color='purple' onClick="pic_color(this)"class="pointer clrimg">

<script>
function pic_color(el)
{
	// set the form field to hidden
	document.getElementById('name_pref').type = 'hidden';
	// set the form field value to the current element's data-color value
	document.getElementById('name_pref').value = el.dataset.color;

	// get the src attribute from the current element and set the pref_img src attribute
	document.getElementById('pref_img').setAttribute('src',el.getAttribute('src'));
	// display the pref_img element
	document.getElementById('pref_img').style.display = 'block';
}
</script>

<form method='post'>

<input type="text" name="name_pref" id='name_pref' style="font-size: 24px;" value="">
<img style="display:none" id='pref_img' class="pointer clrimg">

<br>
<input type='submit'>
</form>

 

[PNewCode]

@kicken Much love for what you posted. I actually learned a lot from that, though it's not ideal for what I'm trying to do for THIS one, but it will be perfect for another project I'm working on so you were very helpful. Thank you!

@mac_gyver You nailed it. This was simple and fast and exactly what I needed. Thank you so much. And now I know how to do this for other projects too. I was also working on something similar to this that listed a bunch of images in a row to send (like a picker) but I gave up on that. After a month it got me drained. But I think after this project is done I'll use this method to try that again

[PNewCode]

@mac_gyver I hope I'm not being a pain, but do you know how to get rid of the gap that is from the line below? I'm including a screen shot. It might be silly for me to be concerned with it but it's annoying me haha. It's that space under  the current and change to colors
 

<?php echo '<pre>'; print_r($_POST); echo '</pre>'; ?>

[Barand]

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?

[PNewCode]

7 hours ago, Barand said:

as print_r() is a debugging tool, why don't you just remove the line?

Well now I feel silly haha. For some reason I thought it was important. Yup, removing it solved that. Thank you