add/delete image ID to/from textbox when image clicked

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

Something like this (not tested)?

var $input = $('#textbox'); // <-- your input field

$('img').click(function() {
    var value = $input.val();
    var id = $(this).attr('id');
    if (value.match(id)) {
        value = value.replace(id, '');
    }
    else {
        value += ' ' + id;
    }
    $input.val(value);
});

Answer 2

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));
   });