javascript - Using a button with AJAX to change a variable -

this relatively simple question i've been struggling understand ajax far. code have @ moment more of proof of concept forgive how untidy / unrefined is.

i have webpage pulls through information sql database dependant on selected dates. user can use choose options on dropdown menu choose date. looking add 'view next month' , 'view previous month' button, button should (in theory (in head)) either +1 or -1 variable determines information displayed.

the drop down works shown below

main_page

     <script>  function showuser(str) { if (str == "") {     document.getelementbyid("txthint").innerhtml = xmlhttp.responsetext;     return; } else {     if (window.xmlhttprequest) {         // code ie7+, firefox, chrome, opera, safari         xmlhttp = new xmlhttprequest();     } else {         // code ie6, ie5         xmlhttp = new activexobject("microsoft.xmlhttp");     }     xmlhttp.onreadystatechange = function() {         if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {             document.getelementbyid("txthint").innerhtml = xmlhttp.responsetext;         }     };     xmlhttp.open("get","visitorstats/dropdown.php?q="+str,true);     xmlhttp.send(); }   }      </script>         ................................                             <form>               <select id="users" name="users"       onchange="showuser(this.value)">                 <option value="<?php echo "$thismonth" ?>">timeframe : month</option>                 <option value="<?php echo "$alltime" ?>">all time</option>                 <option value="<?php echo "$threemonths" ?>">past 3 months</option>                 <option value="<?php echo "$sixmonths" ?>">past 6 months</option>                 <option value="<?php echo "$oneyear" ?>">past 12 months</option>                 </select>               </form>            <div id="txthint"><b>       <?php    $q = date('y') . date('m');   $sql = "select sum(count) totalhits page_hits monthyear >= '$q'";     $result=mysqli_query($conn,$sql);     //loop through results     while($row = mysqli_fetch_array($result))    {     $totalhits = $row['totalhits']  ;        } 

dropdown.php

<?php   $q = intval($_get['q']);   $sql = "select sum(count) totalhits page_hits monthyear >= '$q'";    $result=mysqli_query($conn,$sql);        etc etc etc 

this works fine @ moment. looking implement buttons take being displayed on screen @ moment , minus 1 $q or add 1 $q (increases or decreases month)

ideally these buttons shown when option "$thismonth" // "timeframe : month" selected. 'view previous month' button shown on load (as can't see future) meaning user can go backwards current month many times want , can go forward month until variable ($q) = current date.

theoretically need button take current $q , add 1 (and button minus 1) reload dropdown.php refresh information

i feel im being stupid, thankyou , help!

bind onreadystatechange event fire event when xmlhttprequest complete, test if succeeded , want xmlhttp.responsetext, response php script:

xmlhttp.onreadystatechange = function() {   if (xmlhttp.readystate === 4) {     var response = json.parse(xmlhttp.responsetext);       if (xmlhttp.status === 200 && response.status === 'ok') {          console.log('successful');          console.log(xmlhttp.responsetext);       } else {          console.log('failed');       }   } } 

do before fire .send() method.

if don't mind jquery ajax (looks you're using vanilla js):

$.ajax({   type: "post",   url: "somescript.php",   datatype: "html",   data: { data: "object" }, // available in php `$_post["data"]` ( = "object" )   success: function(data) {     alert(data); // php response data   } }); 

then, button event fire off ajax request:

document.getelementbyid("button-id").onclick = function() {   xmlhttp.open("get","visitorstats/dropdown.php?q=" + str,true); // increment `str` 1 here   xmlhttp.send(); // or jquery ajax method above. };