Exibir campo no form somente se o campo anterior for maior que 0

Arthur Maximo · Julho 12, 2016

Pessoal, boa tarde.

Sou iniciante com isso e estou super enrolado aqui, preciso de uma ajuda de alguém que entenda mais que eu.

Em um formulário que estou desenvolvendo, preciso que um campo seja exibido somente se no campo anterior a escolha seja maior que 0 (zero).

Veja o código.

<!-- Campo 1 - Verificar se a quantidade de filhos é maior que 0, caso seja o campo abaixo deve aparecer, se não ele deve manter oculto-->
  <div class="form-group perguntar">
    <label for="inputQtdFilho" id="qtdfilho" class="control-label">Quantos Filhos você tem deste Casamento?</label>
	<select class="form-control">
		<option value="0" selected="selected">0</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
		<option value="6">6</option>
		<option value="7">7</option>
		<option value="8">8</option>
		<option value="9">9</option>
	</select>

<!-- Função para fazer a verificação -->
	<script type="text/javascript">
	$('#qtdfilho').change(function(){
	if ($(this).val() > 0) {
	$('#filhomais18').show();
	} else {
		$('#filhomais18').hide();
		$('#qtdfilho').val(0);
	}
						})
					</script>

					<!-- Campo que deve aparecer somente se a quantidade de filhos for maior que zero, inicialmente oculto, aguardando condição -->
				   <div class="form-group perguntar">
				   	<label for="InputFilhomais18" id="filhomais18">Algum filho menor de 18 anos ou Incapacitado?</label>
					<select class="form-control">
					  <option value="-">-</option>
					  <option value="sim">Sim</option>
					  <option value="nao">Não</option>
					</select>

Gleyson Abreu · Julho 12, 2016

No código JS e HTML dei uma pequena modificada:

<script src="../jquery.js"></script>  <div class="form-group perguntar"> <label for="inputQtdFilho" id="qtdfilho" class="control-label">Quantos Filhos você tem deste Casamento?</label> <select class="form-control"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select>

<!-- Função para fazer a verificação -->
<script type="text/javascript">
$('.form-control').change(function(){
var val = $(this).val();
if ( val != 0) {
$('#filhomais18s').show();
} else {
$('#filhomais18s').hide();
$('.form-control').val(0);
}
});
</script>

<div class="form-group perguntar" id="filhomais18s" style="display:none;"> <label for="InputFilhomais18" id="filhomais18">Algum filho menor de 18 anos ou Incapacitado?</label> <select class="form-control"> <option value="-">-</option> <option value="sim">Sim</option> <option value="nao">Não</option> </select>

allex_carvalho · Julho 12, 2016

Dei uma estruturada no código:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		
		<style>
			.InputFilhomais18 {
				display: none;
			}
		</style>
		
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
		<!-- Função para fazer a verificação -->
		<script type="text/javascript">
			$(document).ready(function(){
				$('#qtdfilho').change(function(){
					if ($(this).val() > 0) {
						$('.InputFilhomais18').show();
					} else {
						$('.InputFilhomais18').hide();
						$('#qtdfilho').val(0);
					}
				})
			});
		</script>
	</head>
	
	<body>
		<!-- Campo 1 - Verificar se a quantidade de filhos é maior que 0, caso seja o campo abaixo deve aparecer, se não ele deve manter oculto-->
		<div class="form-group perguntar">
			<label for="qtdfilho" class="control-label">Quantos Filhos você tem deste Casamento?</label>
			<select id="qtdfilho" name="qtdfilho" class="form-control">
				<option value="0" selected="selected">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
			</select>
		</div><!-- perguntar -->

			<!-- Campo que deve aparecer somente se a quantidade de filhos for maior que zero, inicialmente oculto, aguardando condição -->
			<div class="form-group perguntar InputFilhomais18">
				<label for="InputFilhomais18">Algum filho menor de 18 anos ou Incapacitado?</label>
				<select id="InputFilhomais18" name="InputFilhomais18" class="form-control">
					<option value="-">-</option>
					<option value="sim">Sim</option>
					<option value="nao">Não</option>
				</select>
			</div><!-- perguntar -->
	</body>
</html>

Dei um display none na div que não quer que fique visível. Só retira o display, caso a anterior seja maior que zero.

Arthur Maximo · Julho 12, 2016

Dei uma estruturada no código:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		
		<style>
			.InputFilhomais18 {
				display: none;
			}
		</style>
		
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
		<!-- Função para fazer a verificação -->
		<script type="text/javascript">
			$(document).ready(function(){
				$('#qtdfilho').change(function(){
					if ($(this).val() > 0) {
						$('.InputFilhomais18').show();
					} else {
						$('.InputFilhomais18').hide();
						$('#qtdfilho').val(0);
					}
				})
			});
		</script>
	</head>
	
	<body>
		<!-- Campo 1 - Verificar se a quantidade de filhos é maior que 0, caso seja o campo abaixo deve aparecer, se não ele deve manter oculto-->
		<div class="form-group perguntar">
			<label for="qtdfilho" class="control-label">Quantos Filhos você tem deste Casamento?</label>
			<select id="qtdfilho" name="qtdfilho" class="form-control">
				<option value="0" selected="selected">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
			</select>
		</div><!-- perguntar -->

			<!-- Campo que deve aparecer somente se a quantidade de filhos for maior que zero, inicialmente oculto, aguardando condição -->
			<div class="form-group perguntar InputFilhomais18">
				<label for="InputFilhomais18">Algum filho menor de 18 anos ou Incapacitado?</label>
				<select id="InputFilhomais18" name="InputFilhomais18" class="form-control">
					<option value="-">-</option>
					<option value="sim">Sim</option>
					<option value="nao">Não</option>
				</select>
			</div><!-- perguntar -->
	</body>
</html>

Dei um display none na div que não quer que fique visível. Só retira o display, caso a anterior seja maior que zero.

Cara, muito obrigado, deu certo aqui.

Aos demais que me ajudaram ai valeu mesmo.

Grande abraço.

Entrar

Arquivado

Exibir campo no form somente se o campo anterior for maior que 0

Recommended Posts

Arthur Maximo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gleyson Abreu 49

Compartilhar este post

Link para o post

Compartilhar em outros sites

allex_carvalho 124

Compartilhar este post

Link para o post

Compartilhar em outros sites

Arthur Maximo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

PHP+Codeigniter - Dúvida referente a PDV

PHP+Codeigniter - Dúvida em Relação a Teclas

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante