multiple image crop using jcrop

Question

i'm trying to crop multiple images using jcrop plugin. this plugin is working for single image crop but i have no idea how to crop multiple images individually from loop. my php file is as follows

<?php 

  $id=$_GET['id'];
  $query_image=mysql_query("SELECT * FROM tbl_images WHERE `id`='$id'");

  $j=0;
    while($rowq=mysql_fetch_assoc($query_image))
    { 
     $image_source = $rowq['image']; 

 ?>

  <div>
     <img src="../image_files/<?php echo $image_source;?>" width="550px" id="cropbox_<?php echo $j;?>" />

        <form action="crop_image.php?id=<?php echo $id;?>" method="post" onsubmit="return checkCoords()">
           <input type="text" id="x" name="x" value="" />
           <input type="text" id="y" name="y" value=""/>
           <input type="text" id="w" name="w" value=""/>
           <input type="text" id="h" name="h" value=""/>

           <input type="submit" value="crop">
           <input type="reset" value="cancel">
         </form>
  </div>

<?php  
   $j++;
 }
  $count = $j;
?>

and jcrop functions are as follows

 <script type="text/javascript">

    var i;
    var count = "<?php echo $count;?>";

    $(function(){
      for(i=0; i<count;i++)
      {
       $('#cropbox_'+i).Jcrop({    
       aspectRatio: 0,
       onSelect: updateCoords
       });
     }
   });     

  function updateCoords(c)
  {
    var x = $('#x').val(c.x);
    var y = $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
  };

  function checkCoords(k)
  {
    if (parseInt($('#w_'+k).val())) return true;
    alert('Please select a crop region then press submit.');
    return false;
  };   

</script>

but the function updateCoords(c) not returning co-ordinate values. if you have any suggestions on this code then please help me. thank you in advance.

Answer 1

for image form

    <form action="crop_image.php?id=<?php echo $id;?>" method="post" onsubmit="return checkCoords('<?php echo $j;?>')">
       <input type="text" id="x_<?php echo $j;?>" name="x" value="" />
       <input type="text" id="y_<?php echo $j;?>" name="y" value=""/>
       <input type="text" id="w_<?php echo $j;?>" name="w" value=""/>
       <input type="text" id="h_<?php echo $j;?>" name="h" value=""/>

       <input type="submit" value="crop">
       <input type="reset" value="cancel">
     </form>

for updateCoords(c) function

 function updateCoords(c)
  {
    for(i=0; i<count;i++)
    {
      var x = $('#x_'+i).val(c.x);
      var y = $('#y_'+i).val(c.y);
      $('#w_'+i).val(c.w);
      $('#h_'+i).val(c.h);
    }
  };

function checkCoords(k)
  {
    if (parseInt($('#w_'+k).val())) return true;
    alert('Please select a crop region then press submit.');
    return false;
  };

hi sujan try this