Jquery Select an img and submit it. (form construction)

Question

Here is my issue, i want to select an image and submit it using jquery, so i have diferent images, i select one and submit.

So my idea is when i click on some image in my LabBox, for example, 'images/dontlike_OFF.png', i create one select atribute ( $(this).attr('select', 'true');and later, when i click on sendLabForm i want to get the name of the image that i have clicked by using a selector $(#LabBox img[attribute=Value]).

I believe this idea of creating an attribute is weird , but i really can see, on firebug, that attribute is really created, the problem is only when i want to get the name of that img with the selected attribute.

So, my question is: Why this is not possible? There is some way to get the name of the img that i have selected when i click on a submit button without using usual html forms?

<div id='LabBox'>
    <img alt="dontlike" name="dlike" src="images/dontlike_OFF.png"/>
    <img alt="check" name="check" src="images/check_OFF.png"/>
    <img alt="funny" name="funny" src="images/funny_OFF.png"/>
    <img alt="idea" name="gidea" src="images/idea_OFF.png"/>
    <img alt="imp" name="imptt" src="images/imp_OFF.png"/>
 </div>   
    <script type="text/javascript">

        $("#LabBox img").click(function () {
                $(this).attr('select', 'true');     
            });

        $("#sendLabForm").click(function(){
            console.log($("#LabBox img[select='true']").name);     
        });


    </script>

select is not a valid attribute, nor selected for img tag. You should use data on modern browsers. — A. Wolff, Apr 17 '13 at 15:54

score 2 · Answer 1 · answered Apr 17 '13 at 16:11

2

You should use data(), something like that:

DEMO

$("#LabBox img").click(function () {
     $(this).data('select', true);
 });

 $("#sendLabForm").click(function () {
     var selectedImgs = [];
     $("#LabBox img").each(function () {
         $(this).data('select') ? selectedImgs.push(this.name) : false;
     });
     alert(selectedImgs.join(','));
 });

answered Apr 17 '13 at 16:11

A. Wolff

74,033
9
94
155

Derek_Henderson solution it seems to ensure browsers interoperability. However I believe that roadsted solution is more efficient because .data() can "store arbitrary data associated with the matched elements or return the value at the named data" ([API Documentation](http://api.jquery.com/data/)) besides to run only on modern browsers.Thanks a lot to you guys. You've help me a lot with this discussion – ePascoal Apr 17 '13 at 16:46

Derek Henderson · Answer 2 · 2013-04-17T17:13:17.830

1

What you should do is create a list of checkboxes associated with the images (or use the data attribute, as commented below). You can hide the checkbox if you want the user to click the image, just create an association between the image and checkbox. When you submit the form, the image url string in the checkbox value is submitted.

What you should not do is invent attributes.

edited Apr 17 '13 at 17:13

answered Apr 17 '13 at 15:53

Derek Henderson

9,388
4
42
71

Yes i already see that technique of hiding a checkbox, in my case is a radio button form, but there is not other option instead hiding forms? thanks for your answer by the way. – ePascoal Apr 17 '13 at 16:07
2

Well, if you want to avoid creating checkboxes, you could, as @roasted suggests, create .data('selected') for each image. Then when you submit, send those images which have .data('selected'). But if you have a submit button, presumably you have a form, so why not go that route? – Derek Henderson Apr 17 '13 at 16:21
At first I gave a downvote, because the data-* attribute or a simple js array or hash are superior data stores compared to extraneous markup...but then I retracted because you could convince me that it could be considered appropriate in the context of a form submission. – Kevin C. Apr 17 '13 at 17:08
Um, why the downvote? It may not be the preferred answer, but it is certainly a valid answer, especially in the context of a form submission (which is the context the question was framed in)? (@KevinC., this isn't directed at you, since you say you retracted your downvote.) – Derek Henderson Apr 17 '13 at 17:11
@DerekHenderson , i already gave my upvote to you! It wasn't me for sure. And like i said before im greatful for your participation. – ePascoal Apr 17 '13 at 18:06

score 0 · Answer 3 · answered Apr 17 '13 at 17:05

0

Why not simply give selected images a class?

$('#LabBox img').click(function(e){
    $(this).toggleClass('active');
});

$('form').submit(function(){
    console.log( $('#LabBox img.active') );
});

answered Apr 17 '13 at 17:05

Kevin C.

2,499
1
27
41

score 0 · Answer 4 · answered Apr 17 '13 at 17:51

0

This is my solution for my problem. In real terms you can create attributes, you just have to specify the .attr() method to get them.

This really works.

$("#LabBox img").click(function () {

        $(this).attr('select', true);
});


$("#sendLabForm").click(function(){

    console.log( $('#LabBox img[select="true"]').attr('name'));

    });

At this moment i don't see any disadvantage to this method, but if you notice any issue for this method, please let me know.

answered Apr 17 '13 at 17:51

ePascoal

2,362
6
26
44

2

The problem is this is using a non-standard attribute. You should either use the $.data() method, or at least name the attribute 'data-select' per the spec. See this answer for more info on why $.data() is preferable: http://stackoverflow.com/a/7262427/193494 – Kevin C. Apr 17 '13 at 18:11
To reiterate, if you're not going to go the way of form controls, `.data()` is the way to go. Also, `.prop()` is preferable to `.attr()`. You shouldn't be inventing nonstandard attributes. – Derek Henderson Apr 17 '13 at 18:24

Jquery Select an img and submit it. (form construction)

4 Answers4