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'];

}
  

?>

Use a Submit button instead of onchange, otherwise the user won't have chance to select their dates properly before it sends data to the server and gets a response. That's potentially annoying and confusing for the user, and also wasteful because you're using resources to make a request which probably isn't necessary. If you handle the "click" event of the button you can then write JavaScript to get the values from all the fields you're interested in — ADyson, Nov 20 '21 at 08:25
@ADyson Yes, I had used the submit button using PHP code. which also deselect the value in the select tag to default. But I don't want to refresh the page when the button is clicked. I want the data when the second date is selected. Is there any other way to do it? — tru_shar, Nov 20 '21 at 08:35
Read what I said again. You need to handle the "click" event of the submit button using JavaScript. Then you can select the values you want for your Ajax request. Just because you use a submit button doesn't mean you have to do a full postback. — ADyson, Nov 20 '21 at 08:45
@ADyson As you suggested I used the submit button. But the values are not being passed to SQL query. — tru_shar, Nov 20 '21 at 10:48
**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) — Dharman, Nov 20 '21 at 12:47

score -1 · Accepted Answer · answered Nov 20 '21 at 12:13

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'];

}
    

?>

get data between selected dates using Ajax and JavaScript from database

1 Answers1