0
jQuery:
// JavaScript Document
$(document).ready(function (e) {
$("#idPastor").on("change", function () {
$.ajax({
url: "_scripts/_php/_validacoes/buscarDadosRedes.php",
type: "POST",
dataType: "json",
data: {
idPastor: $("#idPastor").val()
},
beforeSend: function() {
$("#imgCarregando").css('display','block');
},
success: function (result) {
$("#imgCarregando").css('display','none');
$('#idRede').find('option').remove();
if (result == null){
$("#idRede").append("<option value=>Sem Redes</option>");
} else {
$("#idRede").append("<option value=>Escolha a Rede</option>");
result.forEach(function(option){
$("#idRede").append("<option value=" + option["idRede"] + ">" + option["nome"] + "</option>")
});
}
}
});
});
$("#idRede").on("change", function () {
$.ajax({
url: "_scripts/_php/_validacoes/buscarDadosRegioes.php",
type: "POST",
dataType: "json",
data: {
idRede: $("#idRede").val()
},
beforeSend: function() {
$("#imgCarregando").css('display','block');
},
success: function (result) {
$("#imgCarregando").css('display','none');
$('#idRegiao').find('option').remove();
if (result == null){
$("#idRegiao").append("<option value=>Sem Regiões</option>");
} else {
$("#idRegiao").append("<option value=>Escolha a Região</option>");
result.forEach(function(option){
$("#idRegiao").append("<option value=" + option["idRegiao"] + ">" + option["nome"] + "</option>")
});
}
}
});
});
$("#idRegiao").on("change", function () {
$.ajax({
url: "_scripts/_php/_validacoes/buscarDadosAreas.php",
type: "POST",
dataType: "json",
data: {
idRegiao: $("#idRegiao").val()
},
beforeSend: function() {
$("#imgCarregando").css('display','block');
},
success: function (result) {
$("#imgCarregando").css('display','none');
$('#idArea').find('option').remove();
if (result == null){
$("#idArea").append("<option value=>Sem Áreas</option>");
} else {
$("#idArea").append("<option value=>Escolha a Área</option>");
result.forEach(function(option){
$("#idArea").append("<option value=" + option["idArea"] + ">" + option["nome"] + "</option>")
});
}
}
});
});
$("#idArea").on("change", function () {
$.ajax({
url: "_scripts/_php/_validacoes/buscarDadosSetores.php",
type: "POST",
dataType: "json",
data: {
idArea: $("#idArea").val()
},
beforeSend: function() {
$("#imgCarregando").css('display','block');
},
success: function (result) {
$("#imgCarregando").css('display','none');
$('#idSetor').find('option').remove();
if (result == null){
$("#idSetor").append("<option value=>Sem Setores</option>");
} else {
$("#idSetor").append("<option value=>Escolha a Setor</option>");
result.forEach(function(option){
$("#idSetor").append("<option value=" + option["idSetor"] + ">" + option["nome"] + "</option>")
});
}
}
});
});
$("#idSetor").on("change", function () {
$.ajax({
url: "_scripts/_php/_validacoes/buscarDadosCelulas.php",
type: "POST",
dataType: "json",
data: {
idSetor: $("#idSetor").val()
},
beforeSend: function() {
$("#imgCarregando").css('display','block');
},
success: function (result) {
$("#imgCarregando").css('display','none');
$('#idCelula').find('option').remove();
if (result == null){
$("#idCelula").append("<option value=>Sem Celulas</option>");
} else {
$("#idCelula").append("<option value=>Escolha a Célula</option>");
result.forEach(function(option){
$("#idCelula").append("<option value=" + option["idCelula"] + ">" + option["nome"] + "</option>")
});
}
}
});
});
});
This script, makes the population via $.ajax of jQuery combo in the form.
Everything works fine.
But consider the form down below:
Imagine what the user has filled all the fields and suddenly decides to touch the Networks select option as it is in the figure.
However, the option Rede 2 NO Registered Regions yet.
However, note that all fields below are filled in and this would not negate a possible form Ubmit with wrong data?
Still, imagine the situation where the option Rede 2 HAS other Registered Regions which would compromise the choice of selects following
how to get around this problem?