Проверка формы Javascript, основанная на значениях

Мне нужно отредактировать свой вопрос, чтобы сделать его понятным. Мне нужно добавить значение startdate и enddate на этом jsonData.php.Проверка формы Javascript, основанная на значениях

Если текстовое поле пуст, значения defaul будут отображаться, но если нет .. начальные и конечные значения должны быть введены пользователем.

<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; 
}

Im получаю эту ошибку, потому что я объявил переменные на отдельном скрипте теги. Как я исправлю это. enter image description here

UPDATE 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'); 
      }

источник

2012-03-23 Tristan Jade Awat

Вы можете просто поставить значения по умолчанию, как 'значения =«2012-01-01»' в вашем HTML ... – elclanrs

уже сделали эти люди .. –

Если я так правильно понимаю, это то, что вы хотите, вероятно.

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>

источник

2012-03-23 03:31:58

Спасибо вам за помощь, но Unfotunately он не работало. Я отредактировал свой пост, чтобы четко рассказать о том, что я хочу. Благодаря! –

Я изменил его, попробуйте. –

получение ошибки «startdate is undefined» –

Проверка формы Javascript, основанная на значениях

ответ

Смежные вопросы