html multiselect images

Question

I printed to the screen 16 icons (little pictures).

Now I want to be able to select icons, and when I press a button the selected icons ids will be sent in a form.

I saw in the net only checkboxes and lists multiselect, what's the best way to do this?

(I'm pretty new to web design)

thanks ahead!

Answer 1

Although jQuery isn't in your tags, you should introduce yourself to jQuery. It'll make your life easier, for what you're trying to do. Here is the basic steps both if you use jQuery and if use just Javascript:

With jQuery

• Give all your icons a class and each one a unique id:

<img src='icon1.png' data-iconID=2233 class='myIcons' />).

• Then bind that class to a click event

$('.myIcons').bind('click', function() { $(this).toggleClass('selectIcon'); });

• Attach form submit function to onsubmit:

<form ... onsubmit="submitForm();">

• Build submitForm function:

     function submitForm() {
      var csvIconIds = '';
      $.each($('.myIcons.selectIcon'), function (index, value) {
          csvIconIds += $(value).attr('data-iconID');
      });
      //submit scvIconIds here along with other form data (ajax?)
     }
  

With Javascript

Similar as above but way more complicated...

• To toggle classes see this thread: How to add/remove a class in JavaScript?

• To getting attributes by class see this site: http://www.actiononline.biz/web/code/how-to-getelementsbyclass-in-javascript-the-code/