I'm setting up a simple program for a website that updates a price for products as different products and quantities are selected from a drop down list. I am not getting back my string response into my responseText. Here is a sample of the code I am using in 3 different files Here is the main page code:
<script type="text/javascript" src="templates/js/price.js"></script>
<script type="text/javascript" src="templates/js/ajax.js"> </script>
<?php
require_once(DATA.'dbOrders.php');
require_once(DATA.'dbCustomer.php');
require_once(DATA.'dbProducts.php');
$username = $_SESSION["loggedInUser"];
$email = getEmailByUsername($username);
$orders = getAllCustomerOrders($email);
if ($orders != null){
$x = 1;?>
<table>
<tr>
<td width="20px">Orders</td>
<td width="85px">Date</td>
<td width="10px">Qty</td>
<td width="175px">Item</td>
<td width="45px">Total</td>
<td width="75px">Status</td>
</tr>
<?php foreach ($orders as $order){?>
<tr>
<td width="20px"><?php print $x.".";?></td>
<td width="85px"><?php print $order->getDate();?></td>
<td width="10px"><?php print $order->getQty();?></td>
<td width="175px"><?php print $order->getItem();?></td>
<td width="45px">$<?php print $order->getTotal();?></td>
<td width="75px"> - <?php print $order->getStatus(); $x++;}?></td>
</tr>
</table><?php }
$errors=array();
if(!isset($_POST['qty'])){//Check if form has posted yet
$_POST['qty'] = "100";$_FILES["file"]="";
$errors['qty']="";$errors['img1']="";
display_form();
}
if(isset($_POST['submit'])){ //collect the information from the form
validate_input();
if($errors['qty']==""
&& $errors['img1']==""){
place_order();}
else{display_form();}
}
function validate_input(){ //check input for valid data
global $errors;
if($_POST['qty'] == "" || !(is_numeric($_POST['qty']))){
$errors['qty']="<font color='red'>
***Enter valid quantity***</font>";
}
else{$errors['qty']="";}
if($_FILES["file"]["name"]==""){
$errors["img1"]="<font color='red'>
***Please select an image***</font>";
}
else{$errors["img"]="";}
}
function place_order(){
if($_POST['back']== 0){
$back = "1";}
else{$back=2;}
$item = "PC".$back."-46-".$_POST['qty'];
$image1 = $_FILES['file']["name"];
$image2 = $_FILES['file2']["name"];
move_uploaded_file($_FILES["file"]["tmp_name"],"images/" . $_FILES["file"]["name"]);
move_uploaded_file($_FILES["file2"]["tmp_name"],"images/" . $_FILES["file2"]["name"]);
$username = $_SESSION["loggedInUser"];
$email = getEmailByUsername($username);
$qty = $_POST['qty'];
$date = date("Y-m-d");
$customer= selectCustomerIDByUser($username);
$total = getPrice($item);
$status = "Processing";
$order = new Order($date,$customer,$email,$item,$qty,$total,$status,$image1,$image2);
addOrder($date,$customer,$email,$item,$qty,$total,$status,$image1,$image2);
$order->sendConfirmation(); ?>
<h3>Order has been placed. Thank you.</h3>
<script type="text/javascript">setTimeout(function(){window.location.href='index.php';},2000);</script>
<?php }
function display_form(){
global $errors;
?>
<div>
<form name="newOrderForm" method="post" enctype="multipart/form-data" >
<table>
<tr> </tr>
<tr><td colspan="3"><h3>4x6 Postcards</h3></td></tr>
<tr> </tr>
<tr>
<td><font color="red">Front Side</td>
<td><font color="red">Back Side</td>
</tr>
<tr>
<td>Full Printing</td>
<td><select name="back" id="back" onChange="OnSelectedIndexChange();">
<option value="2">Full Color</option>
<option value="0">No Printing</option>
<option value="1">Black or Gray scale</option>
</select></td>
</tr>
<tr>
<td>Quantity</td>
<td><select name="qty" id="qty" onChange="OnSelectedIndexChange();">
<option value="<?php echo $_POST['qty']; ?>"><?php echo $_POST['qty']; ?></option>
<option value="500">500</option><option value="1000">1000</option>
<option value="2000">2000</option><option value="2500">2500</option>
<option value="3000">3000</option><option value="4000">4000</option>
<option value="5000">5000</option><option value="6000">6000</option>
</select></td>
<td><?php echo $errors['qty']; ?></td>
</tr>
<tr>
<td>Price:<textarea id="price"></textarea></td>
</tr>
<tr><td>
<label for="file">Font image:</label>
<input type="file" name="file" id="file"/> </td>
<td><?php echo $errors['img1']; ?></td>
</tr>
<tr><td>
<label for="file2">Back image:</label>
<input type="file" name="file2" id="file2"/> </td>
<td><?php echo $errors['img2']; ?></td>
</tr>
<tr>
<td colspan="1"><input name="submit" type="submit" value="Submit Order" /></td>
<td colspan="1"><input name="reset" type="reset" value="Reset" /></td>
<td></td>
</tr>
</table>
</form>
<?php } ?>
</div>
This code startes the process when the onChange event happens on the main page: price.js:
function OnSelectedIndexChange()
{
var qty = document.getElementById('qty').value;
var back = document.getElementById('back').value;
var url = "includes/getPrice.php?qty=" + escape(qty) +
"&back=" + escape(back);
request.open("GET", url, true);
request.onreadystatechange = displayPrice;
request.send(null);
}
function displayPrice() {
if (request.readyState === 4) {
if (request.status === 200) {
var price = request.responseText;
/* Update the HTML web form */
document.getElementById("price").value = price;
}
}
}
This is my ajax code ajax.js
var request = null;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = null;
}
}
}
if (request === null)
alert("Error creating request object!");
And then this the php file getPrice.php
<?php
require(DATA.'dbProducts.php');
$qty = $_REQUEST['qty'];
$back = $_REQUEST['back'];
echo "hi";
?>
When a change is made in one of the drop down lists "hi" should appear in the 'price' textbox (as it is coded now), but nothing shows up.
