Passing variables to ajax from php then into SQL query

Question

I am trying to pass a datepicker variable into an onclick ajax function which then passes that to another ajax method which passes the variable to an SQL query and then the query is passed back into the ajax to generate a chart. However I am getting an Uncaught TypeError: Cannot read property 'target' of undefined at jquery ui.

HTML

 <div class="sorting">

    <h4 class="d-inline">Start Date</h4>
    <input type = "text" id="start" />
    <h4   class="d-inline">End Date</h4>
    <input type = "text" id="end"/>
    <button type ="button" onclick="onClick()" class="btn btn-primary">Submit</button>
    <div class="filters float-right d-inline">
        <h5 class="d-inline">TRIBES &nbsp;</h5>
        <select class="dropdown" name="date-filter" id="date-filter" onchange="updateBarChart()">
            <option>Early Morning</option>
            <option>Wh</option>
            <option>Tribe 3</option>
            <option>Tribe 4</option>
        </select>
    </div>
</div>

ajax

var myLineChart;
    $( document ).ready(function() {
        $(function() {
            $("#start").datepicker();
        });

        $(function() {
            $("#end").datepicker();
        });


    });



     function onClick() {
         var start = $("#start");
         var end = $("#end");
         ajaxLineRequest(start,end);
     }


         $('#loadingbar').show();
        $.ajax({
        type: 'POST',

        url: 'ajax/tribe_data.php',
        data: {start:start,end:end},
        dataType: 'json',

        success: function (data) {

            console.log(data[0]);

            data = {
                    datasets: [{
                        data: data[0].datasets,
                        borderColor: ['rgba(255,99,132,1)'],
                        fill:false,
                        backgroundColor: [
                            'rgba(255,99,132,1)'

                    ]


                }],
                labels: data[0].labels

                };  
                    myLineChart = new Chart(document.getElementById("tribe"), {
                    type: 'line',
                    data: data,
                    options: {

                        legend: {
                            display: false
                        },
                        scales:{
                            yAxes:[{
                                ticks:{
                                    autoSkip: false
                                }
                            }]
                        }
                    }
                });


        },
      complete: function(){
            $('#loadingbar').hide();
        },
        error: function(xhr, status, error) {
            console.log(xhr.responseText);
        }
    });
}                   

Answer 1

It is difficult for me to know at what point in the execution of this script the named function 'onClick' is attached as an event handler, however I have pointed out a few places you can improve the code.

Add a name attribute to the input elements e.g.

<input type = "text" id="start" name="start"/>

Then reference the value of the form inputs with:

var start = $("#start").val();

Your current code sends the jQuery element itself as the data items of the AJAX request, rather than the value of the inputs.