Hi. How do you pass values from a php back to a html page (preferrably with AJAX)? When the request has been sent form the html page
Yes, AJAX request and replace/add the content to the HTML page
(or you could use IFRAMEs, but don’t)
This is what I have at the moment…
client side…
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;
}
}
var price = document.getElementById(‘price’);
xmlhttp.open(“POST”, “test2.php”, true);
xmlhttp.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
xmlhttp.send(“price=” + price.value); //Posting price to PHP File
document.myForm.price.value= “”; //clears form
}
</script>
</head>
<body>
<form name=“myForm”>
<table>
<tr>
<td>Enter Price</td>
<td><input type=“text” name=“price” id=“price”/></td>
</tr>
<tr>
<td colspan=“2”><input type=“button” value=“Submit” onclick=“loadXMLDoc();” /></td>
</tr>
</table>
<div id=“myDiv” name=“MyDiv”></div>
</form>
Server side…
<?php
$a = $_POST[‘price’]; //value of price form
ini_set(‘display_errors’, TRUE);
error_reporting(E_ALL);
$con = mysql_connect(“localhost”,““,””);
if (!$con)
{
die('Could not connect: ’ . mysql_error());
}
mysql_select_db(“project”, $con);
$result = mysql_query(“SELECT * FROM image”);
// CHOOSE A JPG BANNER IMAGE FROM THE BANNERS DIRECTORY
$my_dir = ‘img/’;
// OPEN THE BANNERS DIRECTORY
if ($dh = opendir($my_dir))
{
// MAKE AN ARRAY OF THE JPG IMAGE FILE NAMES
$b = array();
while (($filename = readdir($dh)) !== FALSE)
{
// CHOOSE ONLY JPG IMAGES
$file_ext = strtoupper(end(explode(‘.’, $filename)));
if ($file_ext != ‘JPG’) continue;
$b[] = $filename;
}
closedir($dh);
// MAKE AN ARRAY OF THE JPG IMAGE FILE NAMES
// WITH ALL FILE NAMES IN AN ARRAY, RANDOMIZE THE LIST AND CHOOSE ONE
shuffle($b);
$banner_name = array_pop($b);
$banner_url = $my_dir . $banner_name;
mysql_query("UPDATE image SET price = '$a'
WHERE path = ‘$banner_url’");
}
while($row = mysql_fetch_array($result));
{
echo $row;
$row[‘idImage’];
$row[‘path’] = $banner_url;
echo “<img src='” . $row[‘path’] . “'/>”; //prints out image
}
unset($b);
mysql_close($con);
?>
Even though I did this code I’m confused about where the image is received at the client side.
Also how do I pass over a value from the database to client side and then use that value.
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
[B][COLOR="Red"]document.getElementById("myDiv").innerHTML=xmlhttp.responseText;[/COLOR][/B]
}
}
var price = document.getElementById('price');
xmlhttp.open("POST", "test2.php", true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send("price=" + price.value); //Posting price to PHP File
document.myForm.price.value= ""; //clears form
}
</script>
</head>
<body>
<form name="myForm">
<table>
<tr>
<td>Enter Price</td>
<td><input type="text" name="price" id="price"/></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="Submit" onclick="loadXMLDoc();" /></td>
</tr>
</table>
[B][COLOR="red"]<div id="myDiv" name="MyDiv"></div>[/COLOR] [/B]
</form>
While using AJAX, the received HTTP response (XML or Text) is received by the Javascript code in execution. I’ve highlighted 2 lines of code. 1st line in Javascript - receives the response from PHP file (after execution) and it updates the content of ‘myDiv’ div element (highlighted in HTML portion) with the response. You can simply Print anything from the PHP file (say Print “Hi”; ) and it’ll be displayed in the Div element of HTML page when the AJAX request is completed (ready state=4, http status code=200).
If you need further clarification PM me. I’ll feel glad to help further…
Hi, thanks for your help
I’d like to take a value sent over from the server and not use it in myDiv below.
Then I’d like to send that value back via POST. Is that possible?
Possible!
Make it as follows:
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//changes made on 2 lines of code below
document.getElementById("price").value=xmlhttp.responseText;
[COLOR="Red"]document.getElementById("myForm").submit();[/COLOR]
}
}
var price = document.getElementById('price');
xmlhttp.open("POST", "test2.php", true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send("price=" + price.value); //Posting price to PHP File
document.myForm.price.value= ""; //clears form
}
</script>
</head>
<body>
<form name="myForm" id="myForm" action="path_to_post_file.php" method="post">
<table>
<tr>
<td>Enter Price</td>
<td><input type="text" name="price" id="price"/></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="Submit" onclick="loadXMLDoc();" /></td>
</tr>
</table>
<div id="myDiv" name="MyDiv"></div>
</form>
If you don’t want to Auto Sumbit the form (after populating the value in ‘price’ field), just remove the line of javascript code highlighted in Red. In that case you have to click submit button to submit the form.
Actually just to change the subject…
What I’m hoping to do is…
have a web page that displays the an image and a form. When a value is submitted into that form it is associated with the image and updates the database.
What is happening is…
When I submit the form, the value passed updates the next image that displays and not the image that is currently in view
Can you make it a bit clear?
Sure. Can I PM you about it?