How to set a hidden field value based on a value inside an image with JQuery?

Question

I have a several images like this:

<div class="attribImg"><img data-id="9" src="images/attributes/black.jpg" alt="Black"></div>
<div class="attribImg"><img data-id="3" src="images/attributes/red.jpg" alt="Black"></div>
<div class="attribImg"><img data-id="7" src="images/attributes/green.jpg" alt="Black"></div>
<div class="attribImg"><img data-id="8" src="images/attributes/blue.jpg" alt="Black"></div>

... and a hidden data field like this:

<input type="hidden" id="id[1]" name="id[1]" value="1">

I am looking for the correct way to change the value of the hidden input on click of the images based on what is set with data-id in the images.

score 0 · Answer 1 · edited May 23 '17 at 10:24

0

Using jquery, this can be achieved like this:

   $('.attribImg').on('click', function () {
    var value = $(this).children('img').data('id');
    alert(value)
    $('#id').val(value);
});

UPDATE: The reason the value will not be set is because you have used [] in the id name which is reserved. You are only permitted to use letters(Aa-Zz),digits(0-9),hyphens(-), underscores(_) or colons(:) in that order. There is a good explaination here

WORKING EXAMPLE

edited May 23 '17 at 10:24

Community

1
1

answered Feb 16 '15 at 13:32

Aditya

1,241
5
19
29

Thanks, the Alert works, but it doesn't set the value of the hidden field. – user2924019 Feb 16 '15 at 13:39
@user2924019 you need to use a different id name instead of `id[1]`. check the updated answer. – Aditya Feb 16 '15 at 14:27

score 0 · Answer 2 · answered Feb 16 '15 at 13:41

0

Something similar to the below maybe:

$("input:image").each(function(){
    $(this).click(function(){
        $("#id[1]").val($(this).attr('data-id'));
    });
});

answered Feb 16 '15 at 13:41

Matthew North

553
5
20

How to set a hidden field value based on a value inside an image with JQuery?

2 Answers2