asked on

jquery submit form on click

Hello,

I have a large image gallery and I want the customer to be able to click on the 'add.jpg' and have the id get recorded to a php page.

Is there a way to make it so that when .rank is clicked it submits the id to /recordlike.php?id=####

<li><a class="fancybox" data-fancybox-group="gallery" href="45709.jpg"><img src="45709.jpg" width="200" /></a><img class="rank" id="5710" src="add.png"></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="58491.jpg"><img src="58491.jpg" width="200" /></a><img class="rank" id="18492" src="add.png"></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="42857.jpg"><img src="42857.jpg" width="200" /></a><img class="rank" id="2858" src="add.png"></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="49360.jpg"><img src="49360.jpg" width="200" /></a><img class="rank" id="9361" src="add.png"></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="70762.jpg"><img src="70762.jpg" width="200" /></a><img class="rank" id="30763" src="add.png"></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="80173.jpg"><img src="80173.jpg" width="200" /></a><img class="rank" id="40174" src="add.png"></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="68555.jpg"><img src="68555.jpg" width="200" /></a><img class="rank" id="28556" src="add.png"></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="57394.jpg"><img src="57394.jpg" width="200" /></a><img class="rank" id="17395" src="add.png"></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="46817.jpg"><img src="46817.jpg" width="200" /></a><img class="rank" id="6818" src="add.png"></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="60705.jpg"><img src="60705.jpg" width="200" /></a><img class="rank" id="20706" src="add.png"></li>

Chris Stanyon

Something like this should do it - your recordlike.php will receive the ID in the $_POST['id'] variable and any data echoed out will be passed back in 'response':

$('li .rank').click(function() {
     var id = $(this).attr('id');
     $.ajax({
          type: "POST",
          url: 'recordlike.php',
          data: { id : id },
          success: function(response) {
               alert("All done!")
          }
     });
});

Open in new window

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

movieprodw

ASKER

Awesome! works perfectly