Question

我必须编辑我的问题才能说清楚。我需要做的是在这个jsonData.php上附加startdate和enddate的值。

如果文本字段为空，则默认值将显示，但如果不是..startdate和endate值应该是用户输入的值。

    <script type="text/javascript">

var startdate = "2012-01-01";
var enddate = "2012-01-06";


var jsonData = $.ajax({
          url: "jsonData.php?startdate="+ startdate +"&enddate="+ enddate,
          dataType:"json",
          async: false
          }).responseText;

我的文字字段代码：

Start Date: <input type="text" name="startdate" id="startdate"/>
End Date: <input type="text" name="enddate" id="enddate"/>

我尝试使用此代码，但它没有用：

var startdate = "2012-01-01";
var enddate = "2012-01-06";

if (document.getElementById('startdate').value == ''){

startdate = "2012-01-01";
}
else{
startdate = document.getElementById('startdate').value;
}


if (document.getElementById('enddate').value == ''){
 enddate = "2012-01-06";
}

else{
enddate = document.getElementById('enddate').value;
}

我得到了这个错误，因为我在不同的脚本标签上声明了变量。我将如何解决这个问题。 enter image description here

更新2：整个代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>


 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">

    google.load('visualization', '1', {'packages':['corechart','piechart']});
          </script>




<script type="text/javascript">



  $(document).ready(function() {
    $('.date').datepicker({dateFormat: "yy-mm-dd"});

            var startDate = $('#startdate');
            var endDate = $('#enddate');


            if (startDate.val() == '') {
                startDate.val('2012-01-01');
            }

            if (endDate.val() == '') {
                endDate.val('2012-01-06');
            }

  });





        var pieJsonData = $.ajax({
          url: "overall_calls_forms_pos_pie.php",
          dataType:"json",
          async: false
          }).responseText;

    var pieData = new google.visualization.DataTable(pieJsonData);



      var pieJsonData2 = $.ajax({
          url: "overall_ban_pos_pie_date.php?startdate="+ startdate +"&enddate="+ enddate,
          dataType:"json",
          async: false
          }).responseText;

    var pieData2 = new google.visualization.DataTable(pieJsonData2);

function pieChart() {



pieChartWrapper = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'pie_div',
      'dataTable':pieData,
          'options': {
    chartArea:{left:10,top:40,height:200,width:300},
    width:360, 
    height:260,
    title: "Positive Contacts Percentage", 
    titleTextStyle:{fontSize:14},
    tooltip:{showColorCode:true},
    legend:{textStyle:{fontSize: 12},position:'left'},
    pieSliceTextStyle:{fontSize: 12}

          }
        });

       google.visualization.events.addListener(pieChartWrapper, 'ready', pieReady);

pieChartWrapper.draw();
}

 function pieReady() {

        // Change the pie chart rendering options when clicked.
        document.getElementById('optionsButton').onclick = function() {
          pieChartWrapper.setDataTable(pieData2);
          pieChartWrapper.draw();
        };
        document.getElementById('optionsButton2').onclick = function() {
           pieChartWrapper.setDataTable(pieData);
           pieChartWrapper.draw();
         };

      }



google.setOnLoadCallback(pieChart);


</script>
  </head>
  <body>



Start Date: <input type="text" name="startdate" class="date" id="startdate"/>
End Date: <input type="text" name="enddate" class="date" id="enddate"/>

            <div id="buttons">
  <button style="margin: 2em" id="optionsButton">Get My Data 2</button> 
  <button style="margin: 2em" id="optionsButton2">Get My Current Data</button>      
    </div>
    <div id="pie_div" style="float:left;"></div>     


  </body>
</html>

我用过：纠正我的错误。但除非页面刷新，否则图表不会重绘。

  $(document).ready(function() {
    $('.date').datepicker({dateFormat: "yy-mm-dd"});


            var startDate =  document.getElementById('startdate').value;

            var endDate = document.getElementById('enddate').value;



            if (startDate == '') {
                startDate = ('2012-01-01');
            }

            if (endDate == '') {
                endDate = ('2012-01-13');
            }

Answer 1

如果我理解正确，这可能是你想要的。

Start Date: <input type="text" name="startdate" id="startdate" class="date" />
End Date: <input type="text" name="enddate" id="enddate" class="date" />

<script>
    $(document).ready(function() {
        $('.date').datepicker({dateFormat: 'yy-mm-dd'});

            var startDate = $('#startdate');
            var endDate = $('#enddate');

            if (startDate.val() == '') {
                startDate.val('2012-01-01');
            }

            if (endDate.val() == '') {
                endDate.val('2012-01-06');
            }
    });
</script>

基于值的Javascript表单验证

1 个答案: