ajax sql and PHP query database and return result

Question

I am currently trying to query a database using Ajax. My Ajax Is as follows

function ajaxFunction(){
    var ajaxRequest;  // The variable that makes Ajax possible!

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Not working");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            document.returnhere.value = ajaxRequest.responseText;
        }
    }
    var datepicker = document.getElementById('datepicker').value;
    var datepicker1 = document.getElementById('datepicker1').value;
    var queryString = "?datepicker=" + datepicker + "&datepicker1=" + datepicker1;
    ajaxRequest.open("GET", "detengde.php" + queryString, true);
    ajaxRequest.send(null); 
}

//-->
</script>



<form name='myForm'>
From: <input  id='datepicker' /> <br />
To: <input  id='datepicker1' />
<br />
    <input type='button' onclick='ajaxFunction()' value='Query MySQL' />
</form>
<div id=returnhere></div>

My PHP looks like this:

    include 'config.php'
$startd = ($_GET['datepicker']);
$endd = ($_GET['datepicker1']);


$sql = "SELECT * FROM delays WHERE Delaytype >= date('".$startd."') AND Delaydate < ADDATE(date('".$endd."'), INTERVAL 1 DAY)";


$result = mysqli_query($con,$sql);

while($row = mysqli_fetch_array($result)) {

do something . ..  ..  . .

This query works with PHP on its one and will return records that lie between two date ranges.

Im struggling to get the php output back to my page. To be honest when I click the button very little happens. I am confortable with PHP database interactions AJAX is something I just starting to learn.

Please no messages about the security I am aware this is very unsafe.

There is something very fundamental I am missing here. After many tutorials, searching through stacked overflow its just not clicking (no pun intended)

Answer 1

Add a field with a name "returnhere" to the HTML page.

<input type="text" name="returnhere">

If I'm reading your code right, the callback for the ajax function should fill in its value.

Answer 2

<?php
include 'config.php';
header('Content-Type: application/json; charset="utf-8"');
$startd = ($_GET['datepicker']);
$endd = ($_GET['datepicker1']);

$sql = "SELECT * FROM delays WHERE Delaytype >= date('".$startd."') AND Delaydate < ADDATE(date('".$endd."'), INTERVAL 1 DAY)";


$result = mysqli_query($con,$sql);

//just an empty array here

$final_array=array();

while($row = mysqli_fetch_array($result)) {

// I am not aware of what is being returned. So I am going to assume its a 'value'
// you can just store the values returned, in an array and echo the array or
// json_encode($array) and echo that

// this will just echo the value for time the loop encounters this statement
echo $row['value'];

//push the element into the array.Beware of overhead caused by array_push()
//if it is a `key-value` pair, its better just to use $final_array[$key] = $value;

array_push($final_array,$row['value']);

}
// Don't forget to set the header before echoing the json
echo json_encode($final_array);
?>

I hope this helps to some extent. Or if you need particulars feel free to comment below

In your JS use

document.getElementById("returnhere").value=object.responseText;

or

document.getElementById("returnhere").innerHTML=object.responseText;

which ever suits your need