PHPからajaxに変数を渡してSQLクエリに渡す

Question

datepicker変数をonclick ajax関数に渡そうとしています。この関数は、変数をSQLクエリに渡した別のajaxメソッドに渡してから、クエリをチャートを生成するajax。しかし、私はUncaught TypeErrorを取得しています：jquery uiで未定義のプロパティ 'target'を読み取ることができません。私は名前の関数「onClickのは」と接続されているこのスクリプトの実行中のどの時点で知っているため

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> 

アヤックス

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

ことは困難ですイベントハンドラですが、私はコードを改善できるいくつかの場所を指摘しました。

入力要素に名前属性を追加します。

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

は次いで値フォーム入力のを参照：

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

現在のコードは、AJAXリクエストではなく、値のデータ項目としてjQueryの要素自体を送信します入力。