Ajax and PHP problem

[momasri]

The Ajax Code:

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
var ajaxRequest;  // The variable that makes Ajax possible!

try{
	// Opera 8.0+, Firefox, Safari
	ajaxRequest = new XMLHttpRequest();
} catch (e){
	// Internet Explorer Browsers
	try{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
			alert("Your browser broke!");
			return false;
		}
	}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
	if(ajaxRequest.readyState == 4){
		var ajaxDisplay = document.getElementById('ajaxDiv');
		ajaxDisplay.innerHTML = ajaxRequest.responseText;
	}
}
var pic = document.getElementById('pic').value;

var queryString = "?pic=" + pic;
ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
ajaxRequest.send(null); 
}

//-->
</script>

 

The PHP code:

<?php
require_once("configure.php");
mysql_connect($DBhost,$DBuser,$DBpass) or die("Unable to connect to database" . mysql_error());
@mysql_select_db("$DBName") or die("Unable to select database $DBName" . mysql_error() );
$user_sqla = "select * from $emaila " ;

while($user_array = mysql_fetch_array($user_resulta)) 
{
$pictures = $user_array[picture];
?>
<form name='myForm'>
<?php


echo "<div align='left' style='padding-left:25px'><table border='1'><tr><td><img src=".$pictures." width='65' height='65'><input type='hidden' name='pic' id='pic' value=".$pictures.">". $pictures;?></td>
<td><div style="padding-left:5px; padding-top:15px"><?php echo "<a  href='#' onclick='ajaxFunction()' >Remove</a></td></tr></table></div>"; ?></div>
     </form><?php } ?>

 

the ajax-example.php code:

<?php

// Retrieve data from Query String
$age = $_GET['pic'];


echo $age;
?>

 

 

Now the Php code gives the following result:

 

"image1" "Remove"

"image2" "Remove"

"image3" "Remove"

 

when I click the "Remove" the result I keep getting is "image1" even if I click the remove beside image3 I still get the Image1 Name transffered from my ajax code to the ajax-example.php page

[joel24]

give the jQuery framework a whirl.