How to pass value to the second page using Javascript AJAX

Question

I have an html select on my page

<pre>
$query = mysql_query("select * from results");
echo "<select id='date' onchange='showdata()' class='form-control'>";
while ($arr = mysql_fetch_array($query)) {
echo "<option value=".$arr['month'].">".$arr['month']." / ".$arr['year']. "</option>" ;   
}
echo "</select>";
</pre>

the options are coming from database. After this I have ajax script

<script>

function showdata() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };

  xhttp.open("GET", "result.php", true);
  xhttp.send();
}

</script>

I want it to send the selected value in the html select to the page result.php

You have a problem here, all months of different years will result in the same value for the `select`. — jeroen, Sep 02 '16 at 07:08

score 0 · Answer 1 · edited May 23 '17 at 11:51

Try with this:

$someVariable = $_GET["someVariable"];
$query = mysql_query("select * from results");
        echo "";
        while ($arr = mysql_fetch_array($query)) {
        echo "".$arr['month']." / ".$arr['year']. "" ;

        }
        echo "";

And JS:

<script>

function showdata() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };

  xhttp.open("GET", "result.php?someVariable=test", true);
  xhttp.send();
}

</script>

If you need example for POST, visit Send POST data using XMLHttpRequest

score 0 · Accepted Answer · answered Sep 02 '16 at 07:13

another way of doing the same thing using jquery ajax ...

<select id="item" onchange="send_item(this.value)">
 <?php $someVariable = $_GET["someVariable"];
       $query = mysql_query("select * from results");
       echo "";
     while ($arr = mysql_fetch_array($query)) {?>
<option value="<?php echo your value?>"><?php echo your value?></option>
   <?php }?>
</select>



  <script>
  function send_item(str){
    $.ajax({
        url: '',
        type: "post",
        data: {
           'str':str,
        },
        success: function(data) {

        },
    });
 }
    </script>

How to pass value to the second page using Javascript AJAX

2 Answers2