CODEWITHSUNDEEP
javascripthtml
Blank6
Blank6

Reputation: 97

html multiselect images

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!

Upvotes: 2

Views: 3464

Answers (3)

Jared Farrish
Jared Farrish

Reputation: 49188

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>

Upvotes: 0

Kyle Cureau
Kyle Cureau

Reputation: 19366

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...

Upvotes: 2

Parv Sharma
Parv Sharma

Reputation: 12705

try this

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

Upvotes: 0

Related Questions