Question

I am working on a simple news module. There is a form where user adds multiple image IDs to one textbox then submits it. To improve the usability, I listed all the images they can add (ID numbers displayed next to it) on one side. However, this still is little bit confusing. I want image IDs added/deleted to the textbox when user clicks on the images.

Spare me codes, methods, ideas, examples… I will take anything.

Answer 1

1. Create list of hidden inputs: <input type="hidden" name="photo[ID_HERE]" value="0" />.
2. Create list of images: ...<li><img src="..." id="photo-123" /> Photo #123</li>...

3. Add listener for click event for those images that will change value of input associated with image:

   $("#images img").click(function() {
      var id = $(this).attr("id").replace(/\D/g, "");
      $("input[name='photo[" + id + "]']").val(Math.abs($("input[name='photo[" + id + "]']").val() - 1));
   });