Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

ReivaxII

Formulario com Condicional

Recommended Posts

Olá preciso de uma ajuda, preciso criar um formulário onde ao escolher uma opção, os campos sejam de acordo como escolhido:

 

EX:

 

PROFESSOR

MATEMÁTICA

CIÊNCIAS

PORTUGUÊS

 

preciso que ao escolher uma das disciplinas os campos a serem preenchidos que sejam referente as disciplinas...

 

gostaria de somente uma base, para poder começar a criar...qual o caminho a seguir?

Compartilhar este post


Link para o post
Compartilhar em outros sites

se voce sabe, ja deve ter iniciado...

 

Campos dinamicos? Em qual sentido? não explicou bem o que quer... apenas disse que quer um formulário de acordo com o escolhido... use select... qualquer coisa, pesquise por select hierárquico.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Mastigadinho porque to de bom humor =)

 

<!DOCTYPE html>
<html>
<head>
<title>Test for post imasters</title>
<meta charset="utf8">
<style>
*, html {
margin: 0;
padding: 0;
}
.start_hidden {
display: none;
padding: 10px;
background-color: #fff;
}
#my_form {
width: 960px;
margin: 50px auto;
padding: 10px;
text-align: center;
border: 1px solid #ccc;
background: #eee;
}
select {
padding: 10px;
border: 1px solid #ccc;
color: #464646;
font-family: "chaparral-pro", sans-serif;
cursor: pointer;
}
</style>
</head>
<body>
<form id="my_form">
<label>
<select id="my_select" class="event_change">
<option value="0">Selecione</option>
<option value="matematica">Matemática</option>
<option value="portugues">Português</option>
<option value="geografia">Geografia</option>
</select>
</label>
<fieldset id="matematica" class="start_hidden">
<legend>Container para Matemática</legend>
<input type="text" name="test" id="test" value="value">
<input type="text" name="test" id="test" value="value">
<input type="text" name="test" id="test" value="value">
<input type="text" name="test" id="test" value="value">
</fieldset>
<fieldset id="portugues" class="start_hidden">
<legend>Container para Português</legend>
<input type="text" name="test" id="test" value="value">
<input type="text" name="test" id="test" value="value">
<input type="text" name="test" id="test" value="value">
<input type="text" name="test" id="test" value="value">
</fieldset>
<fieldset id="geografia" class="start_hidden">
<legend>Container para Geogafia</legend>
<input type="text" name="test" id="test" value="value">
<input type="text" name="test" id="test" value="value">
<input type="text" name="test" id="test" value="value">
<input type="text" name="test" id="test" value="value">
</fieldset>
</form>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(function(){
$('.event_change').on('change', function(){
/*
* The select value
* Used for decide what container show, ok?!
*/
var container_show = $(this).val();

// Hide all containers by default
if(container_show == 0){
$('.start_hidden').slideUp();
// Show the select content and hide others
}else{
$.each($('.start_hidden'), function(){
var itself = $(this), // This
id = $(itself).attr('id'); // Id which want show

// If the selected value in select match witch id variable, show it
if(container_show == id){
$('#' + container_show).slideDown();
// and hide others, so we have just one container visible according select value
}else{
$('.start_hidden').not('#' + container_show).slideUp();
}
});
}
});
});
</script>
</body>
</html>
 

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.