Pass dynamically generated input value into hidden input via jQuery

Question

I need help with jQuery solution to pass dynamically generated values to hidden input:

    <input type="hidden" id="hideme" value="">

and dynamically generated values are:

    <?php $sql=mysql_query("SELECT * FROM table"); ?>
    <?php while($rows = mysql_fetch_array($sql)) { ?>                       
    <input type="hidden" name="prefix" id="prefix" value="<?php echo $rows['CardPrefix']; ?>">
    <input type="image" id="logoimage" src="/assets/uploads/<?php echo $rows['Logo']; ?>" />
    <?php } ?>

I tried couple of jQuery script from StackOverflow but they seem not working for me becuase both the input value and image dynamically generated and I can't figure out how to insert specific value to hidden input by clicking respective image.

Any Help will be appreciated.

Regards.

Ids have to be unique

Andreas
– Andreas

2015-02-14 23:50:38 +00:00
Commented Feb 14, 2015 at 23:50 — Andreas
– Andreas, Commented Feb 14, 2015 at 23:50

Anton Krug · Accepted Answer · 2015-02-15 00:18:35Z

Here is link to fiddle where it is working as you wish http://jsfiddle.net/xqn6v6wp/

$( document ).ready(function() {
  $(".clickableImage").click(function(event) {
    var dynamicValue = $(this).data('dynamic');
    alert('Button pressed with value: '+dynamicValue);
    $('#hideme').val(dynamicValue);
  });
});

I got rid of id's in your images because they were not unique and you don't need them in this approach. And made hideme visible so you can see it in this demostration (it will behave the same when you make it hidden):

<input id="hideme" value="">

<input class="clickableImage" type="image" src="/assets/aaa" data-dynamic="1"/>
<input class="clickableImage" type="image" src="/assets/bbb" data-dynamic="20"/>
<input class="clickableImage" type="image" src="/assets/ccc" data-dynamic="333"/>

This is more dynamic approach, I gave each image a class of clickableImage and then in javascript attached a event to it (so you can have 1 or 100 it will be the same code). Inside the event handler I will get data field from inside the clicked html tag. You can use data- attributes to send some information to your javascripts http://www.w3schools.com/tags/att_global_data.asp It's much more modern approach than having extra hidden input next to it.

It's very simple approach and it's pretty robust, independent of IDs, you are in control on which images it will be working and on which it will not (by adding the clickableImage class). Theoretically it should work on any html tag not just images. And it's clean because your dynamic values are together with images in one html tag, you don't have to have two of them and all information is self contained.

PS:You will need include jQuery javascript framework for this.

Andreas · Accepted Answer · 2015-02-15 00:00:00Z

0

Ids have to be unique.
This will work without id="prefix" and id="logoimage" on the inputs.

$('input[type="image"]').on("click", function() {
    $("#hideme").val($(this).prev("input").val());
});

fiddle

answered Feb 15, 2015 at 0:00

Andreas

21.9k7 gold badges52 silver badges58 bronze badges

Collectives™ on Stack Overflow

Pass dynamically generated input value into hidden input via jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related