Tenho um formulário em bootstrap e validado certo, mas eu preciso que ao selecionar uma data no datepicker, ele carregue automaticamente um select com JSON, e tem mais 3 selects precisam ser preenchidos após isso, e todos um dependente do outro, ex:
Escolhi a data 17/05/2015, ele abre uma informação no select abaixo, que abre outra informação após selecionado, e assim por diante.
Por padrão do backend preciso fazer em JSON e Ajax.
Será que alguém pode me ajudar nisso ou me mostrar a melhor forma de eu fazer?
Fiddle: http://jsfiddle.net/rubensoul/2671hn9n
meu codigo html está assim:
<script type="text/javascript">
/** O dia que gostaria de desabilitar no calendário */
var disableddates = ["5-6-2015", "7-7-2015", "8-8-2015", "13-7-2015"];
function DisableSpecificDates(date) {
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
// Formato da desabilitada dd-mm-yyyy
var currentdate = d + '-' + (m + 1) + '-' + y ;
// Vamos agora verificar se a data pertence a disableddates matriz
for (var i = 0; i < disableddates.length; i++) {
// Agora, verifique quais datas existem na matriz datas e ativa no calendário.
if ($.inArray(currentdate, disableddates) != -1 ) {
return [true];
} else {
return [false];
}
}
// No caso de a data não está presente na matriz deficientes , vamos agora verificar se é um fim de semana .
// com a função noWeekends
var weekenddate = $.datepicker.noWeekends(date);
return weekenddate;
}
$(function() {
$( "#calendario" ).datepicker({
beforeShowDay: DisableSpecificDates,
minDate: 0,
dateFormat: 'dd/mm/yy',
//validação da data caso preenchimento errado ou vázio
onSelect: function (calendario, inst) {
$('#calendario').text(this.value);
$('#defaultForm').bootstrapValidator('revalidateField', 'calendario');
},
// tradução do calendário
dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
monthNames: [ 'Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
nextText: 'Próximo',
prevText: 'Anterior'
});
});
$(document).ready(function(){
$("#calendario").select(function(){
$.ajax({
type: "POST",
url: "teste.php",
data: {calendario: $("#calendario").val()},
dataType: "json",
success: function(json){
var options = "";
$.each(json, function(key, value){
options += '<option value="' + key + '">' + value + '</option>';
});
$("#regiao").html(options);
}
});
});
});
</script>
<script>
$('#regiao').change(function(){
$.ajax({
type: "POST",
url: "teste2.php",
data: {regiao: $("#regiao").val()},
dataType: "json",
success: function(json){
var options = "";
$.each(json, function(key, value){
options += '<option value="' + key + '">' + value + '</option>';
});
$("#profissional").html(options);
}
});
});
</script>
<form id="defaultForm" action="lista-atendimento.html" method="POST">
<div class="form-group">
<label control-label>* Data da consulta:</label>
<input id="calendario" type="text" class="date-picker form-control2" name="calendario" placeholder="Data da consulta" />
<label for="calendario" class="input-group-addon2 btn" style="margin: -3px 0 0 -4px;"><span class="glyphicon glyphicon-calendar"></span> </label>
</div>
<div class="form-group">
<label>* Região:</label>
<select class="form-control2" name="regiao" id="regiao">
<option>Selecione a Data</option>
</select>
</div>
<div class="form-group">
<label>* Profissional:</label>
<select class="form-control2" name="profissional">
<option>Selecione uma região</option>
</select>
</div>
<div class="form-group">
<label>* Horários Disponíveis:</label>
<select class="form-control2" name="horarios">
<option>17:00</option>
<option>18:00</option>
</select>
</div>
no meu php json está assim:
<?php echo json_encode(array(
// id e nome
'0'=>'Selecione Região',
'1'=>'Barueri',
'2'=>'Paulista'));
?>
Tenho um arquivo php com o dados json, primeiro eu preciso que ao clicar na data ele carregue os dados do json para o primeiro campo (região) com base nas informações da data, e ao clicar em região, popule o arquivo profissional, e em seguida popule a hora