Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá a todos, eu estou tendo dificuldade em fazer uma mudança em um form, já pesquisei maneiras mas não dá certo, tenho a seguinte situação:
Tem um formulário de cadastro de anúncio onde o cara pode se cadastrar escolhendo entre plano gratis ou pago, o gratis tem alguns campos e o pago tem esses campos mais alguns outros extras, os campos são obrigatórios, mas quando ele selecionar o gratis entào não posso obriga-lo a preencher um campo que não está disponível para ele.
No meu html os campos que pertencem ao plano pago estão dentro de uma div com a classe nt, então no meu arquivo functions.js eu crei o seguinte bloco de código:
$("#plano").change(function() {
if($(this).children("option").val() == 'gratis') {
$.each($("#frm_cadastro").find("div .nt")) {
$($(this) + ":nth-child(2)").removeClass("required");
$(this).hide();
}
} else {
$.each($("#frm_cadastro").find("div .nt")) {
$($(this) + ":nth-child(2)").addClass("required");
$(this).show();
}
}
})
O que eu quis fazer é verificar o valor do option quando ele mudar o plano no select, então verifica, se for gratis vai remover a classe required do segundo filho que é o input ou textarea, pois o primeiro é a label, remover pois pode ser que ele já tenha escolhido o plano pago antes, pois de começo vem selecionado o gratis e esses campos vem sem a classe required, então ele esconde a as divs que contém esse campo, e no caso se for pago ele faz o processo contrário, já tentei com o :nth-child() e adicionando uma classe second a esses campos e no codigo fazendo o .find(".second"), mas nem um nem outro dá certo, alguém por favor poderia me ajudar ?Eu dei uma mudada no código:
$("div.nt").each(function() {
$(this).hide();
});
$("#plano").change(function() {
if($(this).children("option").val() == 'gratis') {
// $.each($("#frm_cadastro").find("div .nt")) {
// }
$("#frm_cadastro > div .nt").each(function() {
$($(this)+":nth-child(2)").removeClass("required");
$(this).hide();
});
} else {
$("#frm_cadastro > div .nt").each(function() {
$($(this)+":nth-child(2)").addClass("required");
$(this).show();
});
}
});>
Substitua as linhas
$($(this) + ":nth-child(2)").removeClass("required");
$($(this) + ":nth-child(2)").addClass("required");$(this).children().children().removeClass("required");
$(this).children().children().addClass("required");Mas se eu fizer isso ele vai adicionar e remover a classe required também no label, e provavelmente somente no primeiro filho que é a label por não estar em um each.
Voce vai substituir os codigos que estão dentro do each, consequentemente ele vai continuar dentro do each.
>
Substitua as linhas
$($(this) + ":nth-child(2)").removeClass("required");
$($(this) + ":nth-child(2)").addClass("required");$(this).children().children().removeClass("required");
$(this).children().children().addClass("required");Agora que reparei, vc usou .children() 2x, isso faria pegar o segundo filho ou pegaria o filho do filho ?
Nesse caso pegaria o filho do filho mas se você quiser pegar o segundo filho voce pode trocar
.children().children()
Por isso
.children().next()
Atualmente meu código está assim:
$(document).ready( function() {
//----------------------------Escolha do plano-------------------------------------
//Esconde os campos do plano pago ao carregar a página
$("div.nt").each(function() {
$(this).hide();
});
$("#plano").change(function() {
if($(this).children("option").val() == 'gratis') {
// $.each($("#frm_cadastro").find("div .nt")) {
// }
$("#frm_cadastro > div .nt").each(function() {
$(this).children().next().removeClass("required");
// $($(this)+":nth-child(2)").removeClass("required");
$(this).hide();
});
} else {
$("#frm_cadastro > div .nt").each(function() {
$(this).children().next().addClass("required");
// $($(this)+":nth-child(2)").addClass("required");
$(this).show();
});
}
});
});Aeeeee consegui, sou foda u_u, sqn, hahahahaa
O problema é que eu estava checando o valor do option, mas acontece que tem mais de um option, então eu descobri que posso fazer o .val() do select que ele vai resgatar o valor do option que foi selecionado, também criei apenas uma div com a classe nt, pois os campos que sao do plano pago estavam todos um após o outro, então não havia necessidade de criar diversas divs, apenas uma e todos os campos do pago dentro dela assim o código ficou mais limpo, desse jeito:
//----------------------------Escolha do plano-------------------------------------
//Esconde os campos do plano pago ao carregar a página
$("div.nt").hide();
$("#plano").change(function() {
if($(this).val() == 'gratis') {
// $.each($("#frm_cadastro").find("div .nt")) {
// }
$("div .nt").children().each(function() {
$(this).removeClass("required");
// $($(this)+":nth-child(2)").removeClass("required");
$("div .nt").hide();
});
} else {
$("div .nt").children().each(function() {
$(this).addClass("required");
// $($(this)+":nth-child(2)").addClass("required");
$("div .nt").show();
});
}
});Valeu pela ajuda de qualquer forma :D
Substitua as linhas
Por essas