Javascript Form Validation based on values
<p>I have to edit my question just to make it clear. What I need to do is attach the value of startdate and enddate on this jsonData.php.</p>

<p>If the text field is empty, the defaul values will show, but if not..startdate and endate values should be what was entered by the user.</p>

<pre><code>    &lt;script type="text/javascript"&gt;

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


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

<p>MY Text field code:</p>

<pre><code>Start Date: &lt;input type="text" name="startdate" id="startdate"/&gt;
End Date: &lt;input type="text" name="enddate" id="enddate"/&gt;
</code></pre>

<p>I tried using this code, but it didnt work:</p>

<pre><code>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;
}
</code></pre>

<p>Im getting that error because I have declared the variables on separate script tags. How will i Fix this.
<img src="http://i.stack.imgur.com/8QAT8.jpg" alt="enter image description here"></p>

<p>UPDATE 2: Whole code:</p>

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


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

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




&lt;script type="text/javascript"&gt;



  $(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 +"&amp;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);


&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;



Start Date: &lt;input type="text" name="startdate" class="date" id="startdate"/&gt;
End Date: &lt;input type="text" name="enddate" class="date" id="enddate"/&gt;

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


  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I USED: to correct my mistake. But the chart doesnt redraw unless the page refreshes.</p>

<pre><code>  $(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');
            }
</code></pre>
