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!

score 2 · Answer 1 · edited May 23 '17 at 11:47

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/

THANKS a lot! I entered the site and started reading, seems like jQuery is going to be really helpful — Blank6, Jul 24 '11 at 17:36

score 0 · Answer 2 · answered Jul 23 '11 at 21:22

0

try this

var idArray = [];
$("#container-id img").each(function(index,value){
idArray.push($(value).attr("id"));
});
//do anything with the array

answered Jul 23 '11 at 21:22

Parv Sharma

12,581
4
48
80

Jared Farrish · Accepted Answer · 2019-11-26T15:08:58.923

This could be a way using just plain Javascript or jQuery. I prefer the jQuery version, since it separates the click handler from the markup, instead of using inline onclick handlers, which are in general discouraged.

What this does is use an input element array, which you can create by adding [] to the element name. This same technique can be used on SELECTs and other elements, since it signals to the server that an array has been submitted, as opposed to value known by a single key.

<html>
<head>
<style type="text/css">
div img {
    cursor: pointer;
    border: 1px solid #f00;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>
function setFormImage(id) {
    if (id != '' && !document.getElementById('input_'+id)) {
        var img = document.createElement('input');
        img.type = 'text';
        img.id = 'input_'+id;
        img.name = 'images[]';
        img.value = id;

        document.imageSubmit.appendChild(img);
    }
}
$(document).ready(function(){
    $('#jqueryimages img').click(function(){
        setFormImage(this.id);
    });
});
</script>
</head>
<body>
<pre><?php 

if (count($_GET['images'])) {
    print_r($_GET['images']);
}

?></pre>
<div style="float: left; width: 49%;">
    <h1>Plain ol' HTML</h1>
    1. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-1" onclick="setFormImage(this.id)"/>
    <br/>
    2. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-2" onclick="setFormImage(this.id)"/>
    <br/>
    3. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-3" onclick="setFormImage(this.id)"/>
    <br/>
    4. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-4" onclick="setFormImage(this.id)"/>
</div>
<div id="jqueryimages" style="float: left; width: 49%;">
    <h1>jQuery</h1>
    5. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-5"/>
    <br/>
    6. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-6"/>
    <br/>
    7. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-7"/>
    <br/>
    8. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-8"/>
</div>
<h1>Form Submit</h1>
<form name="imageSubmit" method="get">
    <input type="submit" value="View Selected"/>
</form>
</body>
</html>

THANKS a lot! This is really helpful in my way of understanding web design — Blank6, Jul 24 '11 at 17:34
Can I use jQuery with no worries that it won't work in some browsers? — Blank6, Jul 24 '11 at 17:35
Yes. jQuery supports all browsers. It's actually much easier to use jQuery and be cross-browser compatible than to create your own custom JS, since jQuery handles many of the incompatibilities internally. — Jared Farrish, Jul 24 '11 at 17:37

html multiselect images

3 Answers3