get data between selected dates using Ajax and JavaScript from database

Question

I am using Ajax to get the data based on selection. I need to create a filter that retrieves data between selected dates.

HTML

<form method="POST">
 <label for="start">start:</label>
 <input type="date" id="start" name="start">
 <label for="end">end:</label>
 <input type="date" id="end" name="end">
 <input type="submit" value="Get Data" name="submit" onchange="datefilter(this.value)">
</form>

Now the question is, How can I get the input values from both date pickers and pass them to AJAX variable like below AJAX code. since the onchange event will only return the value of a single input field.

Below, I have used a select tag to get specific data that is in the select tag.

HTML

<select name="truck" onchange="selectVehicle(this.value)">
 <option value="All">All</option>
 <option value="GJ XX T 1234">GJ XX T 1234</option>
 <option value="GJ XX T 1234">GJ XX T 1234</option>
 <option value="GJ XX T 1234">GJ XX T 1234</option>
</select>

AJAX

function selectVehicle(str) {
 if (str == '') {
   document.getElementById('tabledata').innerHTML = '';
   return;
  } else {
   var xmlhttp = new XMLHttpRequest();
   xmlhttp.onreadystatechange = function () {
   if (this.readyState == 4 && this.status == 200) {
    document.getElementById('tabledata').innerHTML =
    this.responseText;
   }
  };
  xmlhttp.open('GET', 'ajax/filter.php?q=' + str, true);
  xmlhttp.send();
}

SERVER

<?php

include("../partials/connect.php");

$q = $_GET['q'];

$sql="SELECT * FROM `0986`  WHERE `vehicle` = '".$q."'";
    
$results=$connect->query($sql);  
    
while($row=$results->fetch_assoc()) {

 echo $row['date'];
 
 echo $row['driver'];

}

UPDATE changed to onclick event on submit button. But the input values are not passed to datefilter.php file using Ajax.

HTML

<form method="POST">
 <label for="start">start:</label>
 <input type="date" id="start" name="start">
 <label for="end">end:</label>
 <input type="date" id="end" name="end">
 <input type="submit" value="Get Data" name="submit" onclick="datefilter()">
</form>

passing the input dates with variables s and e in the below code. Datefilter.js

function datefilter(str) {
    if (str == '') {
        document.getElementById('tabledata').innerHTML = '';
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById('tabledata').innerHTML =
                    this.responseText;
            }
        };
        xmlhttp.open(
            'GET',
            'ajax/datefilter.php?s=' + start + '&e=' + end,
            true
        );
        xmlhttp.send();

        event.preventDefault();
    }
}

echo $s and $e outputs object HTMLInputElement][object HTMLInputElement] datefilter()

<?php

include("../partials/connect.php");

// $v = $_GET['v'];

$s = $_GET['s'];
echo $s;

$e = $_GET['e'];   
echo $e;

$sql="SELECT * FROM `0986` WHERE `date` BETWEEN '.$s.' AND  '.$e.'";
    
$results=$connect->query($sql);  

while($row=$results->fetch_assoc()) {

 echo $row['date'];
 
 echo $row['driver'];

}
  

?>

Answer 1

HTML

<label for="start">start:</label>
<input type="date" id="start" name="start">
<label for="end">end:</label>
<input type="date" id="end" name="end">
<input type="submit" value="Get Data" name="submit" onclick="datefilter(this.value)">

variables can be passed using the tag id. be sure if you have added id for each input tag.

Ajax datefilter.js

function datefilter(str) {
    if (str == '') {
        document.getElementById('tabledata').innerHTML = '';
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById('tabledata').innerHTML =
                    this.responseText;
            }
        };
        xmlhttp.open(
            'GET',
            'ajax/datefilter.php?s=' +
                start.value +
                '&e=' +
                end.value,              
            true
        );
        xmlhttp.send();

        event.preventDefault();
    }
}

used id.value which in above would be start.value . Which are the values of input that will be passed to a database query. s= is the first variable and &e= is the second which is used to pass.

datefilter.php

<?php

include("../partials/connect.php");

$sdate = date_create($_GET['s']);
$s = date_format($sdate,"Y/m/d");

$edate = date_create($_GET['e']);
$e = date_format($edate,"Y/m/d");

$sql="SELECT * FROM `0986` WHERE `date` BETWEEN '".$s."' AND  '".$e."'";
    
$results=$connect->query($sql);  
while($row=$results->fetch_assoc()) {

 echo $row['date'];
 
 echo $row['driver'];

}
    

?>