hello all im back with another question on my project. i keep getting stuck for some reason! i only started using AJAX today so i hope you will forgive my ignorance! okay first of all i have a type button and when i click on it i want it to return a number (which is the amount of a particular item the customer wants to purchase) and the name of a item. the number is selected from a dropdownlist and the name of the book is got from a input type=” hidden”. to get the number from the dropdown list to php i want to use AJAX which i have set up as a method in the header of my html page. the code for this method is shown below at the moment im trying to use ajax to return the number of the item to this same php page. here is the method.
function ajax_post(myform)
{
var hr = new XMLHttpRequest();
var url = "islandshop.php";
var index = myform.quantity1.selectedIndex;
var value = document.getElementById("quantity1").options[index].value;
var variable = "value="+value;
hr.open("post", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
hr.send(variable);
document.getElementById("status").innerHTML = "processing data";
}
next is where when i press the button i want just the number from the dropdown list returned to me in php. but when i clcik on the button which is my add to cart button it returns the whole page “islandshop.php” to me. but with the value at the end of the page which is not all bad at least it is returning the value. here is my form where i call the ajax_post() method with my button.
<form method="post" action="" name="form1">
<span style="color:#000"> <label for="quantity">Quantity:</label></span>
<select name="quantity1" id="quantity1" onchange="">
<option value="1" selected>1</option><option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option><option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option><option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option><option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option><option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option><option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option><option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option><option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option><option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option><option value="29">29</option>
<option value="30">30</option>
</select>
<input type="hidden" name="book1" value="cape clear island: its peopleand landscape" />
<input type="button" value="Add To Cart" name="submit1" onclick="javascript:ajax_post(this.form)"></button>
</form>
which to me seems fine. and the last part is just php tags at the end of the islandshop.php page where i try and print the value and get a copy of the whole page back. so essentially i have my page shown twice in the browser. but with the value in the second version of the page.
<?php
if(isset($_SESSION['username']))
{
echo 'Thank you you selected '. $_POST['value'];
}
?>
i think i know why im getting the whole page back when i press the button as i have the hr.open() url as this page “islandshop.php. i read something about this and it said something about sending the values to the browser and then the browser sending the variable back to a .php page which would redirect them to the original page but it wasnt explained very well. so really my main goal is to just get the value from the dropdown list back to me from the server in php form so i can use the value to do stuff on this page! thanks again for the help hopefully i wont have to post so many questions after i figure this one out. even if anyone can direct me to a good book or article on AJAX i would be delighted! cheers
If you are posting back to the same page then you can do a conditional check to see if the
$_POST['value']is set or not. If it is then do an echo, if not then display the html.