i have a question on the ajax request and how it would handle input type image. i have a list of images all displayed in a certain , i need the user to click on the image he or she wants and when this happens, it is added to their own customized list. the list is displayed at the bottom of the screen, which means that all the images they have chosen would appear at the bottom of the screen in their own box. so the concept is that i have a form, with inputs in the type of 'image'. here's the markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>userList</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
//choose div containg all the images:
<div id="choose"><div id="inside">PICK AN IMAGE:<hr>
//the images will be loaded here in this form
<form type="" method="post" action="">
<input type="image" id="send" name="send" value="images/Woman-02-june.png" src="images/Woman-02-june.png"/>
<input type="image" id="send" name="send" value="images/Man-01-June.png" src="images/Man-01-June.png"/>
</form>
</div></div>
//list div that would display the images the user has chosen
<div id="list"><?php
if(file_exists("list.html") && filesize("list.html") > 0){
$handle = fopen("list.html", "r");
$contents = fread($handle, filesize("list.html"));
fclose($handle);
echo $contents;
}
?></div>
</body>
</html>
so when a user clicks on an image, it's suppossed to be sent to a script which writes the data sent into a file. the file is then loaded and displayed in the "list" . here's the script:
<?php
//get data from array
$pikc=$_POST['send'];
//open file to append
$fp=fopen("list.html", 'a');
//write data to file
fwrite($fp, "<div class='msgln'>"."<img src=\"".$pikc."\">"."<br>"."</div>");
//close the file
fclose($fp);
?>
as you can see, the data sent is the 'value' of the image clicked so that it is taken and concatenation is carried out to include it in the mark up for an image. i know that i need to use ajax to do this, so here is the ajax for it:
<script type="text/javascript" src="jquery-1.8.0.min (1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
//If user submits the form
$("#send").click(function(){
var clientmsg = $("#send").val();
$.post("post.php", {send: clientmsg});
return false;
});
});
</script>
i then include another function that enables auto-scrolling and constant showing of the 'list' i have no problem with that, it's working fine so i won't post it. the problem is, whenever i click on the first image, everything seems to be okay, data is sent to the script without any reloading,but whenever i click on the second one, i'm taken to the script page by my browser, although the file is updated with the content. how do i fix this, to stop any reloading or redirecting? please note that this is just a 'mock-test', the real thing will have data loaded from a mysql database, and that is why i've used the same id for bothimages. it will look something like this:
//after establishing mysql connection, loading data from database, etc
echo "<form method="post" action="">
//fetch array that is holding the loaded data
while ($row=mysql_fetch_array)
{
$row['img_path']=$image;
//echo the data within the form
echo "<input id="send" type="image" value=\"".$image."\">"."<img src=\"".$image."\">";
}
echo "</form>"
so that all the image paths in the database are selected and the respsective images shown using them, there are over 300 of them. then, i'll need to send the form to the script via ajax and the same thing should happen as in my example.if the problem is with the id, i can't manually write id's for three hundred images!, i also don't think giving the form an id and then using it in the ajax process would be okay, i fear that no image would be sent, or all of them would be sent, unless i'm wrong). so, how do i fix this? thank you in advance, i am very new to programming, so i kindly ask for help. (please note that each user, in the real version will have their own "list" files and accounts). thanks, anything will be appreciated, even a different approach to accomplishing the same thing.
