Question

javascript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
$(function() {
  //
  $('#button_submit').click(function() {
    var start_date = $('start_date').val();
    var end_date = $('end_date').val();
    var type = $('type').val();
    alert(start_date);
  });
});
// 
function drawChart() {
  var jsonData = $.ajax({
    url: "visits/day.php?start_date=" + start_date + "&end_date=" + end_date,
    dataType: "json",
    async: false
  }).responseText;

  var obj = jQuery.parseJSON(jsonData);
  var data = google.visualization.arrayToDataTable(obj);


  var options = {
    title: 'Number of visitors'
  };

  if (type === 'pie') {
    var chart = new google.visualization.PieChart(
      document.getElementById('chart_div'));
      chart.draw(data, options);
  }
  if (type === 'bar') {
    var chart = new google.visualization.BarChart(
      document.getElementById('chart_div'));
      chart.draw(data, options);
  }
}  

html:

<form id="myForm">
    <input type="text" name="start_date" id="start_date"><br />
    <input type="text" name="end_date" id="end_date"><br />
    <input type="text" name="type" id="type"><br />
    <input type="button" id="button_submit" value="go">
</form>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

Variables obtained by the form seem empty, ive did that alert(start_date) and says: undifined and are not passing through url:visits/day.php?start_date…

I need that values to send out for my php page without refresh the page

What am I doing wrong?

Answer 1

Add to the above… I don’t see where you’re passing start_date and end_date to your drawChart() function:

Edited to add the call to drawChart()

$(function() {
  //
  $('#button_submit').click(function() {
    var start_date = $('#start_date').val();
    var end_date = $('#end_date').val();
    var type = $('#type').val();
    drawChart(start_date, end_date)
    console.log(start_date, end_date, type);
  });
});
function drawChart(start_date, end_date) {
  var jsonData = $.ajax({
    url: "visits/day.php?start_date=" + start_date + "&end_date=" + end_date,
    dataType: "json",
    async: false
  }).responseText;