Passing javaScript variable value to PHP variable using AJAX
Hi, I'm having a problem trying to get javaScript variable values sent to php variables using AJAX. I've read numerous tutorials and I'm a little confused. The book I have on AJAX isn't helping either lol.
What I have is a gift box that I'm trying to add to my php shopping cart. The gift box has 4 different products in it and the user selects a scent for each using a drop down menu. I have the following javaScript variables that I want to send to PHP variables:
butterId
scrubId
mistId
creamId
I want to get these variables to PHP variables without refreshing the page.
Here is my AJAX code:
Code:
<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");
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){
alert(butterId +", " + scrubId + ", " + mistId + ", " + creamId);
}
}
butterId = document.getElementById('bathButter8oz').value;
scrubId = document.getElementById('bodyScrub8oz').value;
mistId = document.getElementById('bodyMist').value;
creamId = document.getElementById('handCream60').value;
var queryString = "?scent=" + butterId + "&scent2=" + scrubId + "&scent3=" + mistId + "&scent4=" + creamId;
ajaxRequest.open("GET", "giftBox50.php" + queryString, true);
ajaxRequest.send();
}
Here is my code with the drop down menus and the "Add to Cart" link.
Code:
<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); ajaxFunction()"; >
<?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); ajaxFunction()"; >
<?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); ajaxFunction()";>
<?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); ajaxFunction()";>
<?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 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='cart.php' 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.$scent.$scent2;?>&pid=<?php echo $prodId;?>&scent=<?php echo $scent;?>&scent2=<?php echo ($_GET['scent2']);?>&scent3=<?php echo ($_GET['scent3']);?>&scent4=<?php echo ($_GET['scent4']);?>>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>
Not sure, but what exactly do you expect to happen when the AJAX JavaScript code sends the data to the PHP script? You say you want to put the data into a PHP variable, but that will only exist until the PHP script sends its result back to the client. If you want it to persist for other use by PHP, you'll either have to save it in session data or in the DB.
"Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
~ Terry Pratchett in Nation
I need the variables saved to php variables so when the person clicks "add to cart", the gift box info (product id, product description, the 4 scents selected) will be passed to the cart. Under the scent column in the cart, I want the gift box to display the info like this:
Foaming Bath Butter 8oz: butterId, Body Scrub 8oz: scrubId, Body Mist 150mL: mistId, Hand Cream 60mL: creamId.
So i need to convert the javaScript variables to PHP variables so I can get the scent name from my scent database so it displays like this:
Foaming Bath Butter 8oz: Pomegranate, Body Scrub 8oz: Magnolia, Body Mist 150mL: White Violet, Hand Cream 60mL: Unscented.
I know the URL should look something like this:
cart.php?pid=11&scent=0001&scent2=0028&scent3=0038&scent4=0023
I can then use:
$butter_scent=$_GET['scent'];
$scrub_scent= $_GET['scent2']....etc.
I've been trying to get this to work for weeks and I'm to the point where I'm sooo confused....lol.
I'm kinda lost here....I don't know what to put in this section:
Code:
if(ajaxRequest.readyState == 4){
alert(url);
// what do I put in here????
}
}
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);
}
My url variable is correct b/c it is displaying all the correct numbers but it isn't getting attached to cart.php...
I just don't know how I can use $_GET to get my javascript variables into php variables. I am clueless as to what should go into that block of code. How would I save the javascript variables as SESSION variables??
Reply With Quote
Bookmarks