Jquery submit on image

Question

I have a list of images where I want users to be able to click on an image and it submits the data with jquery. So given several images, a user can click on any one of them and it automatically submits to a jquery landing page with the id of the image that the person has chosen. Here is my attempt at the code using a list as images..

<ul>
<li><img id='1' src='/img1.png'></li>
<li><img id='2' src='/img2.png'></li>
<li><img id='3' src='/img3.png'></li>
</ul>

$(function()
{
     $('#img').click(function()
     {
       var datastring = //either 1,2,3 corresponding to image id
       $.ajax({   
       type: "POST",   
       url: "process.php",   
       data: dataString,   
       success: function() {   
          alert('Image Submitted')  
       }      
     });   
}

you'll get that as part of this, in your case it would be: var id= $(this).attr('id'); — SaschaM78, Dec 12 '12 at 18:18
Please read up on valid html ID's http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — calebds, Dec 12 '12 at 18:22
@paislee: good advice, IDs are not allowed to start with numbers; if you need custom properties as alternative, use HTML5's enhanced tag attributes: http://html5doctor.com/html5-custom-data-attributes/ Basically spoken, just write it like: and access the node's value using $(this).attr('data-node') — SaschaM78, Dec 12 '12 at 18:26

score 0 · Answer 1 · answered Dec 12 '12 at 18:21

The complete version:

$(document).ready(function() {
  $('img').click(function()
  {
   var datastring = $(this).attr('id'); // or simply $(this).id;
   $.ajax({   
   type: "POST",   
   url: "process.php",   
   data: dataString,   
   success: function() {   
      alert('Image Submitted')  
  }      
 });   
});

palaѕн · Accepted Answer · 2012-12-12T18:42:37.507

Try this:

$('img').click(function() {
    var datastring = $(this).prop('id');
    $.ajax({
        type: "POST",
        url: "process.php",
        data: dataString,
        success: function() {
            alert('Image Submitted')
        }
    });
});

P.S. The easiest way to see the difference between .attr and .prop is the following example:

<input blah="hello" />

$('input').attr('blah'): returns 'hello' as expected. No suprises here.
$('input').prop('blah'): returns undefined -- because it's trying to do [HTMLInputElement].blah -- and no such property on that DOM object exists. It only exists in the scope as an attribute of that element i.e. [HTMLInputElement].getAttribute('blah')

So, a property is in the DOM; an attribute is in the HTML that is parsed into the DOM. So use prop !

score 0 · Answer 3 · answered Dec 12 '12 at 18:23

A quick look suggests changing these lines:

$('#img').click(function()
 {
   var datastring = //either 1,2,3 corresponding to image id

to this:

 $('img').click(function()
 {
   var datastring = $(this).attr('id');

So we've lost the # since you're not looking for an id. And we've added retrieving the id.

For this part see http://jsfiddle.net/tAH7F/

Jquery submit on image

3 Answers3