PHP and MySQL Image one click action script

I am currently doing a project, and I want to know if it's possible if I could click an image then it will send a query to the database. since I am doing a project about Online menu. where I will click the image then there'll be query to be sent in the database, and after that the customers order wil appear in the side of the screen. is this po开发者_开发问答ssible? if so how ?

You really have several options of how you want to do this. The most basic being to surround your image in a link tag like so:

<a href="/item_ordered.php?item_id=1"><image /></a>

You can then either handle the click with an actual refresh. Or, you can handle it with ajax if you don't want the page to refresh.

Do your work on another php page.

If you need to do this through ajax. Let's suppose you want to load the content sent from the server in the div 'itemdetails'. You can specify this as the image tag(using jquery:

<img src="url/of/image" onclick="$('#itemdetails').load('http://yoursiteurl/items?id=itemid')">

The best way of doing that for me is using jquery like this:

Javascript:

function orderedSomething(id) {
    $.post("ajaxOrder.php",{ orderID:id,rand:Math.random() } ,function(response) {
        if(response=='ok') {
         $("#alert").fadeTo(250,0.1,function() { 
              $(this).html('Your order is coming.').fadeTo(150,1);
         });
    } else {
         $("#alert").fadeTo(250,0.1,function() { 
              $(this).html(response).fadeTo(150,1);
         });        
        }
    });
}

The php file ajaxOrder:

<?php

     if($_POST['orderID']) {
      $res = $query('check stock'); //Assuming that there is no info related to your table
      if(mysql_num_rows($res)>0) {
         $query('insert DB'); //Assuming that there is no info related to your table
         echo 'ok'; 
      } else {
         echo 'Your order is out of stock';
      }
     }
 ?>

So your html should be:

<div id="alert"></div>
<img src="images/ice-cream.gif" onClick="orderedSomething(<?=$iceId?>)" style="cursor:pointer" />