Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Caros amigos to quebrando a cabeça e como não sei muito de javascript acho que estou andando em círculos
O que eu quero é ocultar uma div se os campos obrigatórios não forem preenchidos. Consegui com input e select mas radio button nada.
function optionCheck2(){
var option1 = document.getElementById("nome").value;
var option2 = document.getElementById("email").value;
var radios1 = document.getElementById("tipoPessoa").checked;
if ( (option1 != "")&&(option2 != "")&&(radios1.checked==true) ){
document.getElementById("hiddenDivPac_1").style.display ="table";
} else {
document.getElementById("hiddenDivPac_1").style.display ="none";
}
}
Como resolvo isso???Não obrigue o uso de jQuery :(
JavaScript é amor hehe.
Que horas você chama a função optionCheck2()?
Se liga fiz um exemplo:
<!DOCTYPE HTML>
<html lang="pt_BR">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>Tipo de Pessoa: </p>
<label>
<input type="radio" name="tipoPessoa" class="tipoPessoa" value="F" /> Fisica
</label>
<br />
<label>
<input type="radio" name="tipoPessoa" class="tipoPessoa" value="J" /> Juridica
</label>
<hr />
<div id="div-fisica" style="display:none"> <!-- Força iniciar sempre escondido -->
Div só aparece com pessoa Fisica...
</div>
<script type="text/javascript">
var rTipoPessoa = document.getElementsByClassName("tipoPessoa");
//Percorre todos os radios cujo tenha o className tipoPessoa
for (var i = 0; i < rTipoPessoa.length; i++) {
//Ao trocar o change chama o evento
rTipoPessoa[i].addEventListener('change', function() {
var tipoPessoaSelected = this.value;
//Verifica qual tipo foi selecionado e eftua a ação.
if(tipoPessoaSelected == 'F') {
document.getElementById("div-fisica").style.display = 'block';
} else {
document.getElementById("div-fisica").style.display = 'none';
}
}, false);
}
</script>
</body>
</html>
Demo online:
[https://fiddle.jshell.net/w3LogqL8/](https://fiddle.jshell.net/w3LogqL8/)
Trabalhar com radios pode ser um pouco mais complicado de inicio, pois como seu valor é 'n' você precisa mapear todos (esse o motivo do for + getElementsByClassName )
Seria mais simples se o campo tipoPessoa fosse um <select>Veja como fica mais curto com <select> + id.
<!DOCTYPE HTML>
<html lang="pt_BR">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>Tipo de Pessoa: </p>
<select name="" id="tipoPessoa">
<option value="">Selecione o tipo</option>
<option value="F">Fisica</option>
<option value="J">Juridica</option>
</select>
<hr />
<div id="div-fisica" style="display:none"> <!-- Força iniciar sempre escondido -->
Div só aparece com pessoa Fisica...
</div>
<script type="text/javascript">
document.getElementById("tipoPessoa").addEventListener("change", function() {
var tipoPessoaSelected = this.value;
//Verifica qual tipo foi selecionado e eftua a ação.
if(tipoPessoaSelected == 'F') {
document.getElementById("div-fisica").style.display = 'block';
} else {
document.getElementById("div-fisica").style.display = 'none';
}
});
</script>
</body>
</html>
Porem alguns casos o uso do radio faz mais sentido mesmo, de qualquer forma fica os dois exemplos.
Bons estudos ;)@gabrieldarezzo É que era uma resposta rápida que eu tinha para ele kkkkkkk, na hr eu imaginei que ele estivesse usando já e coloquei o código que eu lembrava de cabeça rsrsrsrsrs.
Amigos @gabrieldarezzo e @Fabio Victor agradeço a ajuda mas acho que não me entenderam, vou tentar explicar melhor.
Não quero verificar qual a opção escolhida e sim se foi escolhida alguma pelo menos dos radios.
Vou postar o código html também:
<div class="form-group col-md-12">
<label class="col-sm-12">Meus dados:</label>
<div class="col-sm-12"> <div class="form-group">
<label>Nome</label>
<input name="nome" class="form-control" placeholder="Nome completo" type="text" required id="nome" onchange="optionCheck2()"/>
</div>
<div class="form-group">
<label>E-mail</label>
<input name="email" class="form-control" placeholder="E-mail principal" type="email" required id="email" onchange="optionCheck2()"/>
</div>
<div class="form-group ">
<label>Login</label>
<input type="text" class="form-control status SimAtivo" name="login" placeholder="Login" required id="login" onchange="optionCheck2()"/>
</div>
<div class="form-group ">
<label>Senha</label>
<input type="password" class="form-control status SimAtivo" name="senha1" placeholder="Senha" required id="senha1" onchange="optionCheck2()"/>
</div>
<div class="form-group ">
<label>Repita a Senha</label>
<input type="password" class="form-control status SimAtivo" name="senha2" placeholder="Repita a senha" required id="senha2" onchange="optionCheck2()"/>
</div>
<div class="form-group">
<label>Tipo de pessoa</label>
<span>
<input type="radio" name="tipoPessoa" value="fisica" required="" id="tipoPessoa" onchange="optionCheck2()"/><span>Física</span>
<input type="radio" name="tipoPessoa" value="juridica" required="" id="tipoPessoa" onchange="optionCheck2()"/><span>Jurídica</span>
</span>
</div>
</div>
<div class="form-group" style="width:100%; display:none;" id="hiddenDivPac_1">
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Voltar</button></li>
<li><button type="button" class="btn btn-primary next-step">Avançar</button></li>
</ul>
</div>
function optionCheck2(){
var option1 = document.getElementById("nome").value;
var option2 = document.getElementById("email").value;
var option3 = document.getElementById("login").value;
var option4 = document.getElementById("senha1").value;
var option5 = document.getElementById("senha2").value;
var radios1 = document.getElementById("tipoPessoa").checked;
var radios2 = document.getElementById("tpEndereco").checked;
var radios3 = document.getElementById("adicionais").checked;
if ( (option1 != "")&&(option2 != "")&&(option3 != "")&&(option4 != "")&&(option5 != "")&&(option6 == "1")
(radios1 != "")&&(radios2 != "")&&(radios3 != "") ){
document.getElementById("hiddenDivPac_1").style.display ="table";
} else {
document.getElementById("hiddenDivPac_1").style.display ="none";
}
}
Veja que ele "esconde" a div "hiddenDivPac_1" até que todos os inputs sejam preenchidos com ao menos 1 caracter e quero checar também se uma opção (não importa qual) ao menos dos radios foi escolhida.
if (option1 != "") -> ok, verifica os inputs
mas if (radios1 != "") -> não funciona.
Enfim, quero mostrar a div se e somente todos os campos required="" forem preenchidos para então mostrar o botão avançar para prosseguir com o cadastro.Alguma ideia pro meu código?
@AndersonWS
fiz um aqui rapidinho, veja se te ajuda:
https://www.w3schools.com/code/tryit.asp?filename=FJJVKWWD9DJX
Ajuda sim Fabio Victor mas como eu colocaria junto na mesma função verificação da radio e de um input por exemplo?
Você pode usar jquery? Se puder usa isso aqui pra pegar o valor selecionado
$("input:radio[name = 'nomeDoRadio']:checked").val()
Ai verifica se o retorno é igual ao valor que você quer ou verifica se é diferente de vazio ou undefined.