为什么使用javascript提交表单时值未定义？

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>

表单获得的变量似乎是空的，我做了那个 alert(start_date) 并说：未定义并且没有通过 url:visits/day.php?start_date...

我需要在不刷新页面的情况下为我的 php 页面发送这些值

我做错了什么？

Answer 1

var start_date = $('#start_date').val();
var end_date = $('#end_date').val();
var type = $('#type').val();

这将通过id（# 后跟id 值）查找 HTML 元素。

$('start_date').val();

上面会找到标签名为<start_date>的元素

接下来，您的变量具有函数可见性范围。所以它们只在匿名函数中定义（并且可见）（即button_submit点击处理程序的回调）。

Answer 2

添加到上面...我看不到您将start_date 和end_date 传递给drawChart() 函数的位置：

编辑添加对 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;