Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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?
amigo isso eu sei, eu preciso que os campos sejam dinâmicos, ao escolher uma seleção os campos mudem...
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.
Mastigadinho porque to de bom humor =)
<!DOCTYPE html>
<html>
<head>
<title>Test for post imasters</title>
<meta charset="utf8">
<style>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(){// Hide all containers by default
if(container_show == 0){
$('.start_hidden').slideUp();
// Show the select content and hide others$.each($('.start_hidden'), function(){
var itself = $(this), // This// 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$('.start_hidden').not('#' + container_show).slideUp();
}
});
}
});
});
</script>
</body>
</html>
https://codando.wordpress.com/2008/03/02/tutorial-iniciante-de-html-formulrios/