using AJAX to return values in javascript to php all on the same page

Question

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

When is the username session variable set ? The html you have posted above is from islandshop.php, and you're posting back to itself ? — aziz punjani
– aziz punjani, Commented Mar 16, 2012 at 18:18
oh yes this i set when the user logs in! and yes im trying to post it back to itself if that is doable? prob not though. trying to get the values from the dropdownlist send then to the server and return them as php values. maybe im barking up the wrong tree completely!? — eoin
– eoin, Commented Mar 16, 2012 at 18:30
im trying to post the value from the dropdown list back to myself! sorry! — eoin
– eoin, Commented Mar 16, 2012 at 18:31

aziz punjani · Accepted Answer · 2012-03-16 18:37:24Z

1

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.

<?php 
if( isset($_SESSION['username']) && isset( $_POST['value'] ) )
{
    echo 'Thank you you selected '. $_POST['value']; 
}
else 
{
?> 
  <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>
<?php } ?>

answered Mar 16, 2012 at 18:37

aziz punjani

25.8k9 gold badges49 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

eoin Over a year ago

yes it is returning the value along with a duplicate copy of the whole page? so essetially i have the page twice in my browser. the $_POST['value']; is returning the whole page plus the value Thank you you selected 1(or whatever value i select) . at the end of the duplicate page. so it is returning the value. its pretty strange i know.

aziz punjani Over a year ago

You only want to echo when you post something to the page and you only want to render markup when you first load the page. Please mark as answered when you get the chance.

eoin Over a year ago

cool! i will mark as answered right now! but i have one more question! so if i didnt want to echo it out say i just wanted to make the value a session variable would it have worked then? obviously i wouldnt have echoed it out staight away but if i wanted to do it later once it was saved as a session variable i could have?

deadrunk · Accepted Answer · 2012-03-16 18:06:23Z

0

I strongly advise you to take a look at the jQuery: http://jquery.com/

answered Mar 16, 2012 at 18:06

deadrunk

14.2k4 gold badges33 silver badges29 bronze badges

3 Comments

eoin Over a year ago

of course iam learning php ,javascript,html, css at the same time so if i could get away without having to learn more my brain would be happy. if i could just do it with ajax i would probably be happier

eoin Over a year ago

although no booze on paddys day might!

aziz punjani Over a year ago

eion, please answer the question i have posted if you would like a solution.

Collectives™ on Stack Overflow

using AJAX to return values in javascript to php all on the same page

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related