1

I need a bit of advice/guidance. I have a selection of colour icons. What I want to acheive is that one someone clicks on the colour icon, it puts the name of the colour into a hidden text field.

So my hidden text field code is - 

<form name=Data>
<input type=hidden id=colour name=colour size=7 maxlength=7>
</form>

I then have my table of icons. So what I want to achieve is that when someone clicks 'teal.png' it changes the value of the text field to 'teal'.

Can someone point me in the right direction on how best to achieve this please?

Select the background colour below<br><br><table class="radioiconstable"  width="200" border="0" cellpadding="0" cellspacing="0">   

<tr>     
<td><img src="custom/icons/teal.png"></td>  
<td><img src="custom/icons/grey.png"></td>  
<td><img src="custom/icons/green.png"></td>  
<td><img src="custom/icons/evergreen.png"></td>    

</tr>  

<tr>     
<td><img src="custom/icons/brightred.png"></td>  
<td><img src="custom/icons/crimson.png"></td>   
<td><img src="custom/icons/orange.png"></td>  
<td><img src="custom/icons/yellow.png"></td>     
</tr>  
<tr>    
<td><img src="custom/icons/sand.png"></td>  
<td><img src="custom/icons/brown.png"></td>
<td><img src="custom/icons/navy.png"></td>  
<td><img src="custom/icons/coolblue.png"></td>     


</tr>  
<tr>     
<td><img src="custom/icons/sky.png"></td> 
<td><img src="custom/icons/purple.png"></td>  
<td><img src="custom/icons/pink.png"></td>     
<td><img src="custom/icons/candyfloss.png"></td>  

</tr>  

</table>
James Harding
  • 69
  • 1
  • 8
  • Welcome to SO, this is not a free code writing service, it is expected that you attempt to solve your problem and then ask a question when you get stuck with a specific problem with your code. Please take a tour of the [help centre](http://stackoverflow.com/help) to see [how to ask a good question](http://stackoverflow.com/help/how-to-ask) and what types of question are [on topic](http://stackoverflow.com/help/on-topic) for the site – Pete Oct 05 '17 at 08:11
  • 1
    You can copy paste one of the answers and it will work. But breaking up your problem and searching for solutions are important skills of a programmer. You can search about 1) [How to add click event handler in jquery?](https://api.jquery.com/click/). 2) [How to get the `src` of an image element?](https://stackoverflow.com/questions/19937162/jquery-get-the-image-src). 3) [How to set the value of an input element?](http://api.jquery.com/val/). You'll learn so much in the process of implementing this. If you're still stuck you can post it on here. – adiga Oct 05 '17 at 08:54

3 Answers3

3

You can use the function I have written below. It might not be the best if the URLs will change (adding more '/' after the file name for example).

What the function does is first it gets the image src of the clicked image and splits the SRC by '/'. Because the filename is always last in your example you want to grab the last value url.length - 1. To obtain the color you do the same, but now you only have green.png so you split by '.' and grab the first element in array (pos: 0).

$("img").click(function(){
    var url = $(this).prop('src').split("/");
    var file = url[url.length - 1].split(".")[0];

  $("#colour").val(file);
})


$("img").click(function(){
 var url = $(this).prop('src').split("/");
 var file = url[url.length - 1].split(".")[0];
  
  $("#colour").val(file);
  
  console.log(file)
})
img{
  height:50px;
  width:50px;
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name=Data>
<input type=hidden id=colour name=colour size=7 maxlength=7>
</form>

Select the background colour below<br><br><table class="radioiconstable"  width="200" border="0" cellpadding="0" cellspacing="0">   

<tr>     
<td><img src="custom/icons/teal.png"></td>  
<td><img src="custom/icons/grey.png"></td>  
<td><img src="custom/icons/green.png"></td>  
<td><img src="custom/icons/evergreen.png"></td>    

</tr>  

<tr>     
<td><img src="custom/icons/brightred.png"></td>  
<td><img src="custom/icons/crimson.png"></td>   
<td><img src="custom/icons/orange.png"></td>  
<td><img src="custom/icons/yellow.png"></td>     
</tr>  
<tr>    
<td><img src="custom/icons/sand.png"></td>  
<td><img src="custom/icons/brown.png"></td>
<td><img src="custom/icons/navy.png"></td>  
<td><img src="custom/icons/coolblue.png"></td>     


</tr>  
<tr>     
<td><img src="custom/icons/sky.png"></td> 
<td><img src="custom/icons/purple.png"></td>  
<td><img src="custom/icons/pink.png"></td>     
<td><img src="custom/icons/candyfloss.png"></td>  

</tr>  

</table>
Adrian
  • 8,271
  • 2
  • 26
  • 43
  • Why the downvote? Please elaborate rather than just giving one for the sake of it. – Adrian Oct 05 '17 at 08:18
  • plus 1 for your answer. I know the feeling when you write a correct answer and nobody votes you. – Mihai Alexandru-Ionut Oct 05 '17 at 08:19
  • @Alexandru-IonutMihai Thanks Alexandru. It's not about not voting, it's about downvoting and not justifying as to what the problem is, especially when the code does what OP is asking for :). Thanks anyway Alexandru. – Adrian Oct 05 '17 at 08:20
  • 1
    yeah, i also dislike when i receive downvotes unjustified. – Mihai Alexandru-Ionut Oct 05 '17 at 08:22
  • Take my +1, this is a great solution – Tomm Oct 05 '17 at 08:36
  • It's most likely for answering an off topic question – Pete Oct 05 '17 at 08:37
  • I didn't downvote, but I'm guessing the downvote was for answering a basic question in which OP hasn't tried anything. – adiga Oct 05 '17 at 08:58
  • @adiga I understand, not a fan of spoon-feeding myself, but I don't believe that deserved a down vote as OP only wanted advice/guidance how to achieve it which is exactly why I broke my answer down into steps at the start, what I did, why and final result. – Adrian Oct 05 '17 at 09:00
  • 1
    I know, I know. It's not nice when you spend a lot of time to write a detailed answer and get downvoted. Evidently, some users are strict when it comes to spoon-feeding. – adiga Oct 05 '17 at 09:16
  • btw, shouldn't it be `attr('src')` instead of `prop('src')`? – adiga Oct 05 '17 at 09:22
  • @adiga No, I mean, both will work however "the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes." taken from JQuery docs. – Adrian Oct 05 '17 at 09:23
1

First of all I got the src attribute of the img using the jQuery function attr().

After that, I replaced the substrings custom/icons/ & .png to get only the color from the src attribute using the replace() function.

Finally, here is a code snippet demonstrating what I've did: 

$("td").on("click",function(){
var color=$(this).find("img").attr("src");
$("#colour").val(color.replace("custom/icons/","").replace(".png",""));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br>
<table class="radioiconstable"  width="200" border="0" cellpadding="0" cellspacing="0">   

<tr>     
<td><img src="custom/icons/teal.png">IMAGE 1</td>  
<td><img src="custom/icons/grey.png">IMAGE 2</td>  
<td><img src="custom/icons/green.png">IMAGE 3</td>  
<td><img src="custom/icons/evergreen.png">IMAGE 4</td>    

</tr>  

</table>


<input type="text" id="colour" name="colour" size="7" maxlength="7">
Mehdi Bouzidi
  • 1,937
  • 3
  • 15
  • 31
0

Without jQuery:

var colorImages = document.querySelectorAll('td img');

colorImages.forEach(function(image){
    image.addEventListener('click', function(event){
        var clickedImageURL = event.target.src;
        var color = clickedImageURL.replace('custom/icons/','').replace('.png','');
        document.querySelector('#colour').value = color;
    });
});

I'd suggest however adding attributes to those images that hold color value instead of getting it from a file name, for example: <img src="custom/icons/yellow.png" data-color="yellow">

Walk
  • 737
  • 4
  • 15