How to pass datepicker value to php without reloading the page using XMLHttpRequest();

Question

How to pass datepicker value to PHP without reloading the HTML page using XMLHttpRequest(); I am using this date value for further query and displaying in the same html page.

<input type="date" id="month" onchange="myFunction(this.value)">
<script>
    function myFunction(str) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("month").value = this.responseText;
            }
        };
        xmlhttp.open("POST", "chart.php", true);
        xmlhttp.send("value=" + str);
    }
</script>

<?php
    $date = "";
    if(isset($_POST["value"])){
        $date =  $_POST["value"];
    }
?>

Answer 1

I believe the function parameter str is giving you the date value you selected if yes, then you are missing the header information for content-type. Please set it as follow after xmlhttp.open("POST", "chart.php" , true);

xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');