I need some help with AJAX. I'm trying to pass javascript variables to php so I can add a gift box to my shopping cart.
Code: Select all
<html>
<head>
<script type="text/javascript" src="./js/functions.js"></script>
<title>$50 Gift Box</title>
<script language=javascript>
//set each of the default scents to "unscented" for each product in this gift basket
scent_chosen=new Array("Unscented", "Unscented", "Unscented", "Unscented");
// initialize the variable 'description' that will display the scents selected, in the textarea box like this:
// .................................................
// . Foaming Bath Butter 8oz: Unscented .
// . Body Scrub 8oz: Unscented .
// . Body Mist 150mL: Unscented .
// . Hand Cream 60mL: Unscented .
// .................................................
//////////////////////////////////////////////////////////////
var description="Foaming Bath Butter 8oz: " + scent_chosen[0] + "\n Body Scrub 8oz: " + scent_chosen[1] + "\nBody Mist 150mL: " + scent_chosen[2] +"\nHand Cream 60mL: " + scent_chosen[3];
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){
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4 && ajaxRequest.status==200){
// What do I put in here????????
alert(url);
}
}
butterId = document.getElementById('bathButter8oz').value;
scrubId = document.getElementById('bodyScrub8oz').value;
mistId = document.getElementById('bodyMist').value;
creamId = document.getElementById('handCream60').value;
var url="?id="<?php echo $prodId;?>+butterId+scrubId+mistId+creamId+"&scent=" + butterId + "&scent2=" + scrubId + "&scent3=" + mistId + "&scent4=" + creamId
ajaxRequest.open("GET", 'cart.php'+url, true);
ajaxRequest.send(null);
}
// function that is called to set the bathScent to whatever scent is selected from the drop down menu under Foaming Bath Butter
function set_butter_scent(y) {
scent_chosen[0]=y;
// updates the textarea field with the scent selected
updateScents();
}
function set_scrub_scent(y) {
scent_chosen[1]=y;
// updates the textarea field with the scent selected
updateScents();
}
function set_mist_scent(y) {
scent_chosen[2]=y;
// updates the textarea field with the scent selected
updateScents();
}
function set_cream_scent(y) {
scent_chosen[3]=y;
// updates the textarea field with the scent selected
updateScents();
}
function updateScents() {
description="Foaming Bath Butter 8oz: " + scent_chosen[0]+ "\n Body Scrub 8oz: " + scent_chosen[1]+ "\nBody Mist 150mL: " + scent_chosen[2] +"\nHand Cream 60mL: " + scent_chosen[3];
// display the updated scents selected from the drop down menus
document.getElementById("gift_box_description").value = description;
}
</script>
</head>
<body background="#1d1d1d" onLoad='document.getElementById("gift_box_description").value = description';>
<div id="wrapper">
<div id="main">
<center><img src="./images/50giftBoxLogo.gif"></center>
<table border="0" width="98%" cellspacing=10 cellpadding=5>
<?php
# connect to the data base and put the product scents into an array $n[]
$sql = "SELECT * FROM productscents ORDER BY scentName ASC";
$query = mysql_query($sql);
$n=array();
$prodId;
$i=0;
// put the scent names and IDs into an array
while ( $row = mysql_fetch_assoc($query)) {
$n[$i]=$row['scentName'];
$scent_id[$i]=$row['scentId'];
$i++;
}
$count=count($n);
$count--;
# gets product price
$sql= "SELECT products.productPrice FROM products WHERE products.productName = '$50 Gift Box'";
$result = mysql_query($sql);
$row = mysql_fetch_array($result);
$price=$row['productPrice'];
# gets product id from the products table
$sql2= "SELECT products.productId FROM products WHERE products.productName = '$50 Gift Box'";
$result2 = mysql_query($sql2);
$row2 = mysql_fetch_array($result2);
$prodId=$row2['productId'];
?>
<tr valign=center>
<td><br><br><br>
<table border=1 width=98% cellspacing=5>
<tr valign=top>
<th align=center valign=top >
<font color="#999999">
8oz Foaming Bath Butter
</font>
</th>
<th align=center valign="top">
<font color="#999999">
8oz Body Scrub
</font>
</th>
</tr>
<tr valign=top>
<td align=center valign=top >
<select id="bathButter8oz" class="dropMenu" onChange="set_butter_scent(this.options[selectedIndex].name)"; >
<?php
// add each scent into the dropdown menu for Foaming Bath Butter
echo "<option> -- Select Scent -- </option>";
for ($y=0; $y<=$count;) {
if ($scent_id[$y]==001) {
echo "<option selected=selected value='".$scent_id[$y]."' name='".$n[$y]."'>".$n[$y]."</option>";
$y++;
}
echo "<option value='".$scent_id[$y]."' name='".$n[$y]."'>".$n[$y]."</option>";
$y++;
}
?>
</select><br><br><br>
</td>
<td align=center valign="top">
<select id="bodyScrub8oz" class="dropMenu" onChange="set_scrub_scent(this.options[selectedIndex].name)"; >
<?php
// add each scent into the dropdown menu for Body Scrub
echo "<option> --Select Scent-- </option>";
for ($y=0; $y<=$count;) {
if ($scent_id[$y]==001) {
echo "<option selected=selected value='".$scent_id[$y]."' name='".$n[$y]."'>".$n[$y]."</option>";
$y++;
}
echo "<option value='".$scent_id[$y]."' name='".$n[$y]."'>".$n[$y]."</option>";
$y++;
}
?>
</select><br><br><br>
</td>
</tr>
<tr valign=top>
<th colspan align=center valign=top>
<font color="#999999">
150mL Body Mist
</font>
</th>
<th align=center valign=top>
<font color="#999999">
60mL Hand Cream
</font>
</th>
</tr>
<tr>
<td align=center valign=top>
<select id="bodyMist" class="dropMenu" onChange="set_mist_scent(this.options[selectedIndex].name)";>
<?php
// add each scent into the dropdown menu for Body Mist
echo "<option> --Select Scent-- </option>";
for ($y=0; $y<=$count;) {
if ($scent_id[$y]==001) {
echo "<option selected=selected value='".$scent_id[$y]."' name='".$n[$y]."'>".$n[$y]."</option>";
$y++;
}
echo "<option value='".$scent_id[$y]."' name='".$n[$y]."'>".$n[$y]."</option>";
$y++;
}
?>
</select><br><br><br>
</td>
<td align=center valign=top>
<select id="handCream60" class="dropMenu" onChange="set_cream_scent(this.options[selectedIndex].name)";>
<?php
// add each scent into the dropdown menu for Hand Cream by looping through the $n[] array
echo "<option> --Select Scent-- </option>";
for ($y=0; $y<=$count;) {
if ($scent_id[$y]==001) {
echo "<option selected=selected value='".$scent_id[$y]."' name='".$n[$y]."'>".$n[$y]."</option>";
$y++;
}
echo "<option value='".$scent_id[$y]."' name='".$n[$y]."'>".$n[$y]."</option>";
$y++;
}
?>
</select><br><br><br>
</td>
</tr>
<tr>
<!-- ################### Display box where the scents chosen for each product will be displayed ################# -->
<td colspan=2 align=center valign=center>
<textarea overflow=hidden id="gift_box_description" name="gift_box_description" readOnly=true
style="width: 600px; text-align: center; height: 80px; overflow: hidden; border:1px;
background: #1d1d1d; font-face: arial; font-size: 16px; color: #999999;"></textarea>
</td>
</tr>
<tr>
<td colspan=2 align=center valign=bottom><br>
<!-- Post the javaScript Variable description so the value can be used by PHP -->
<a action=get href=# onClick="ajaxFunction();">Confirm Scents</a>
<br><br><br>
</td>
</tr>
<!-- table row with the ADD TO CART & VIEW CART links -->
<tr>
<td align="center" valign=center >
<div>
<span>
<form method=post action='' name='form2'>
<input type="hidden" name="id" id="id" value="<?php echo $prodId.$_GET['scent'].$_GET['scent2'];?>"/>
<input type="hidden" name="pid" id="pid" value="<?php echo $prodId;?>"/>
<input type="hidden" name="scent" id="scent" value="<?php echo $scent;?>"/>
<input type="hidden" name="scent2" id="scent2" value="<?php echo $_GET['scent2'];?>"/>
<input type="hidden" name="scent3" id="scent3" value="<?php echo $_GET['scent3'];?>"/>
<input type="hidden" name="scent4" id="scent4" value="<?php echo $_GET['scent4'];?>"/>
<a href=cart.php?id=<?php echo $prodId.$_GET['scent'];?>&pid=<?php echo $prodId;?>&scent=<?php echo $_GET['scent'];?> ;>Add to Cart</a>
<br>
</form>
</span>
</div>
</td>
<td align=center valign=top>
<a href="cart.php">View Cart</a>
</td>
</tr>
</table></tr>
</table>
</div>
<div id="sidebar">
<?php require ("menu.html"); ?>
</div>
</div> <!-- End wrapper class -->
</body>
</html>