how to call ajax event with in php loop & pass two variable in ajax url

PHP LO0P 
Call Event with in loop and change Id according to id
Take an custom Id where we want to display ajax result

<?php foreach($basketproduct as $basket)
{?>
<tr><td><img src="productimages/<?php echo $basket['productimage'] ;?>" width="150" height="200" ></td>
<td><?php echo $basket['description'] ;?></td>
<td><?php echo $basket['sellingprice'] ;?></td>
<td>
<!--<input type="hidden" id="mainbid" value="<?php echo $basket['id'];?>" >-->
<select name="quantity" onchange="changetotal(this.value,<?php echo $basket['id'];?>)">
<?php for($i=1;$i<=30;$i++)
{?>
<option value="<?php echo $i;?>" <?php if($basket['quantity']==$i){ echo 'selected="selected"'; }?>><?php echo $i;?></option>
<?php }?>
</select>


</td>

<td><span id="total<?php echo $basket['id'];?>"> <?php echo $basket['subtotal'] ;?></span></td>

</tr>
<?php } ?>

Call ajax 

<script type="text/javascript">
function changetotal(str,mainid)
{

//var mainid=document.getElementById("mainbid").value;
var url= 'ajaxbasketprice.php?id='+mainid+'&qty='+str;
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("total"+mainid).innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}


</script>

ajaxbasketprice.php

<?php 

include 'init.php';

connection2();

$mainid=$_GET['id'];

 $qty = $_GET['qty'];

//$up=$bas->updatebasket($qty,$mainid);

$sql=mysql_query("update great_basket set `quantity`='".$qty."', subtotal= ".$qty." * sellingprice  where id='".$mainid."'");

$sql1 =mysql_query("SELECT * FROM great_basket WHERE id = '".$mainid."' ");

while($res=mysql_fetch_assoc($sql1))

{

echo $res['subtotal'];

}

?>

JAVASCRIPT IMAGE EXTENSION VALIDATION

Often forms require files to be uploaded by the end users, and the need arises to check the file type. Suppose we may restrict the users to select only images. This can be done using javascript or jquery.

Note: This script ensures whether the chosen file is of type jpg, png or gif.

<script type="text/javascript">

function check_upload(upload_field)

{    

var re_text = /\.jpg|\.png|\.gif/i;    

var filename = upload_field.value;

// Checking file type

if (filename.search(re_text) == -1)    

{        

alert("File does not have (jpg / gif / png) extension");

upload_field.value = '';

return false;    

}

return true;

}

 

function verify_upload()

{

if(document.upload_file.file1.value == "")

{

alert("Please select a file");

return false;

}

return true;

}

</script>

We can also use Jquery to validate the selected file on the fly.

<script type="text/javascript">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>

<script type="text/javascript">

$(document).ready(function(){

$(".container").delegate("input[type=file]", "change", function(){

img_ext = $(this).val().split('.');

img_ext = img_ext[img_ext.length - 1];

if(img_ext != 'jpg' && img_ext != 'png' && img_ext != 'gif')

{

alert("File does not have (jpg / gif / png) extension");

$(this).val('');

}

});

});

</script>

The HTML Form

<div class="container">

<form enctype="multipart/form-data" method="post" action="" name="upload_file">

FILE: <input type="file" onchange="check_upload(this)" id="file" name="file1"><br>

ALT: <input type="text" name="alt" size="30" value="image" /><br>

<input type="submit" onclick="return verify_upload()" value="Upload" name="submit">

</form>

</div>