<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <form id="gform" class="form-horizontal" method="POST" > <fieldset> <legend>Cadastro</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="txtNome">Nome</label> <div class="col-md-9"> <input id="Nome" name="Nome" type="text" placeholder="Nome Completo" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="CPF">CPF</label> <div class="col-md-9"> <input id="CPF" name="CPF" type="text" placeholder="Numero CPF" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="DataNascimento">Data Nascimento</label> <div class="col-md-9"> <input id="DataNascimento" name="DataNascimento" type="date" placeholder="Data de Nascimento" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="CEP">CEP</label> <div class="col-md-9"> <input id="CEP" name="CEP" type="text" placeholder="Numero do CEP" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="Endereço">Endereço</label> <div class="col-md-9"> <input id="Endereço" name="Endereço" type="text" placeholder="Nome da rua, avenida..." class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="Numero">Número</label> <div class="col-md-9"> <input id="Numero" name="Numero" type="number" placeholder="Numero" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="Complemento">Complemento</label> <div class="col-md-9"> <input id="Complemento" name="Complemento" type="text" placeholder="Complemento" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="Bairro">Bairro</label> <div class="col-md-9"> <input id="Bairro" name="Bairro" type="text" placeholder="Informe o Bairro" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="Cidade">Cidade</label> <div class="col-md-9"> <input id="Cidade" name="Cidade" type="text" placeholder="Informe sua cidade" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="Telefone">Telefone</label> <div class="col-md-9"> <input id="Telefone" name="Telefone" type="text" placeholder="Numero de telefone" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="WhatsApp">WhatsApp</label> <div class="col-md-9"> <input id="WhatsApp" name="WhatsApp" type="text" placeholder="Numero do WhatsApp" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-2 control-label" for="Email">Email</label> <div class="col-md-9"> <input id="Email" name="Email" type="text" placeholder="Endereço de email" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="igrejaCatolica">Participa da igreja católica?</label> <div class="col-md-3"> <select id="igrejaCatolica" name="igrejaCatolica" class="form-control auto-placeholder" data-target="#igrejaCatolicaJustifica"> <option value="SIM" data-placeholder="Qual comunidade?">SIM</option> <option value="NAO" data-placeholder="Porque?">NAO</option> </select> </div> <div class="col-md-6"> <input id="igrejaCatolicaJustifica" name="igrejaCatolicaJustifica" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Multiple Checkboxes --> <div class="form-group"> <label class="col-md-2 control-label" for="checkboxes">Recebeu</label> <div class="col-md-9"> <div class="checkbox checkbox-inline"> <label for="checkboxes-1"> <input type="checkbox" name="Batismo" id="checkboxes-1" > Batismo </label> </div> <div class="checkbox checkbox-inline"> <label for="checkboxes-2"> <input type="checkbox" name="Eucaristia" id="checkboxes-2" > Primeira Eucaristia </label> </div> <div class="checkbox checkbox-inline"> <label for="checkboxes-3"> <input type="checkbox" name="Crisma" id="checkboxes-3" > Confirmação (Crisma) </label> </div> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="estadoCivil">Estado Civil</label> <div class="col-md-9"> <select id="estadoCivil" name="estadoCivil" class="form-control" > <option value="Solteiro">Solteiro</option> <option value="Casado">Casado</option> <option value="Divorciado">Divorciado</option> <option value="Viuvo">Viuvo</option> <option value="União Estavel">União Estavel</option> <option value="Separado">Separado</option> </select> </div> </div> <div id="Solteiro"> <div class="form-group"> <label class="col-md-2 control-label" for="SolteiroComundadeReligiosa">Participa de Comunidade religiosa?</label> <div class="col-md-3"> <select id="SolteiroComundadeReligiosa" name="SolteiroComundadeReligiosa" class="form-control auto-placeholder" data-target="#SolteiroComundadeReligiosaJustifica"> <option value="SIM" data-placeholder="Qual comunidade?">SIM</option> <option value="NAO" data-placeholder="Porque?">NAO</option> </select> </div> <div class="col-md-6"> <input id="SolteiroComundadeReligiosaJustifica" name="SolteiroComundadeReligiosaJustifica" type="text" placeholder="Justifique sua resposta" class="form-control input-md"> </div> </div> </div> <div id="Casamento" style="display: none;"> <div class="form-group"> <label class="col-md-2 control-label" for="casamentoIgreja">Realizado na Igreja católica?</label> <div class="col-md-9"> <select id="casamentoIgreja" name="casamentoIgreja" class="form-control"> <option value="NAO">NAO</option> <option value="SIM">SIM</option> </select> </div> </div> <div id="DetalheCasamentoIgreja" style="display: none;"> <div class="form-group"> <label class="col-md-2 control-label" for="casamentoData">Data Casamento</label> <div class="col-md-9"> <input id="casamentoData" name="casamentoData" type="date" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="casamentoParoquia">Paróquia Casamento</label> <div class="col-md-9"> <input id="casamentoParoquia" name="casamentoParoquia" type="text" placeholder="Informe local do casamento" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="casamentoConjuge">Nome Conjuge</label> <div class="col-md-9"> <input id="casamentoConjuge" name="casamentoConjuge" type="text" placeholder="Nome Completo" class="form-control input-md"> </div> </div> </div> </div> <div id="Divorciado" style="display: none;"> <div class="form-group"> <label class="col-md-2 control-label" for="divorciadoMatrimonio">Foi casado na igreja católica?</label> <div class="col-md-3"> <select id="divorciadoMatrimonio" name="divorciadoMatrimonio" class="form-control"> <option value="SIM">SIM</option> <option value="NAO">NAO</option> </select> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="DivorciadoNovoRelacionamento">Está em um novo relacionamento?</label> <div class="col-md-3"> <select id="DivorciadoNovoRelacionamento" name="DivorciadoNovoRelacionamento" class="form-control"> <option value="SIM">SIM</option> <option value="NAO">NAO</option> </select> </div> </div> </div> <div id="Viuvo" style="display: none;"> <div class="form-group"> <label class="col-md-2 control-label" for="viuvoNovoRelacionamento">Está em um novo relacionamento?</label> <div class="col-md-3"> <select id="viuvoNovoRelacionamento" name="viuvoNovoRelacionamento" class="form-control"> <option value="SIM">SIM</option> <option value="NAO">NAO</option> </select> </div> </div> </div> <div id="UniaoEstavel" style="display: none;"> <div class="form-group"> <label class="col-md-2 control-label" for="estavelMatrimonio">Foi casado na igreja católica?</label> <div class="col-md-3"> <select id="estavelMatrimonio" name="estavelMatrimonio" class="form-control"> <option value="SIM">SIM</option> <option value="NAO">NAO</option> </select> </div> </div> <div id="UniaoEstavelRealizarMatrimonio" class="form-group" style="display: none;"> <label class="col-md-2 control-label" for="estavelRealizarMatrimonio">Gostaria de realizar?</label> <div class="col-md-3"> <select id="estavelRealizarMatrimonio" name="estavelRealizarMatrimonio" class="form-control"> <option value="SIM">SIM</option> <option value="NAO">NAO</option> </select> </div> </div> </div> <div id="Separado" style="display: none;"> <div class="form-group"> <label class="col-md-2 control-label" for="separadoMatrimonio">Foi casado na igreja católica?</label> <div class="col-md-3"> <select id="separadoMatrimonio" name="separadoMatrimonio" class="form-control"> <option value="SIM">SIM</option> <option value="NAO">NAO</option> </select> </div> </div> <div id="SeparadoNovoRelacionamento" class="form-group" style="display: none;"> <label class="col-md-2 control-label" for="separadoRelacionamento">Está em novo relacionamento?</label> <div class="col-md-3"> <select id="separadoRelacionamento" name="separadoRelacionamento" class="form-control"> <option value="NAO">NAO</option> <option value="SIM">SIM</option> </select> </div> </div> <div id="SeparadoMatrimonioRealiza" class="form-group" style="display: none;"> <label class="col-md-2 control-label" for="SeparadoRealizarMatrimonio">Gostaria de realizar na igreja católica?</label> <div class="col-md-3"> <select id="SeparadoRealizarMatrimonio" name="SeparadoRealizarMatrimonio" class="form-control"> <option value="SIM">SIM</option> <option value="NAO">NAO</option> </select> </div> </div> </div> </fieldset> <fieldset> <legend>Inscrição</legend> <div class="form-group"> <label class="col-md-2 control-label" for="inscricaoPara">Curso</label> <div class="col-md-9"> <select id="inscricaoPara" name="inscricaoPara" class="form-control" > <option value="1">Preparação para batismo</option> <option value="2">Catequese da primeira comunhão</option> <option value="3">Catequese da Crisma</option> <option value="4">Curso de noivos</option> </select> </div> </div> <div id="Batismo"> <div class="form-group"> <label class="col-md-2 control-label" for="batismoNome">Nome</label> <div class="col-md-9"> <input id="batismoNome" name="batismoNome" type="text" placeholder="Conforme certidão de nascimento" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="batismoDataDataNascimento">Data Nascimento</label> <div class="col-md-9"> <input id="batismoDataDataNascimento" name="batismoDataDataNascimento" type="date" placeholder="Data de nascimento do batizando" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="batismoLocalDataNascimento">Local Nascimento</label> <div class="col-md-9"> <input id="batismoLocalDataNascimento" name="batismoLocalDataNascimento" type="text" placeholder="Local de nascimento do batizando" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="batismoDizimista">Familia dizimista?</label> <div class="col-md-3"> <select id="batismoDizimista" name="batismoDizimista" class="form-control auto-placeholder" data-target="#batismoDizimistaJustificativa"> <option value="SIM" data-placeholder="Qual comunidade?">SIM</option> <option value="NAO" data-placeholder="Porque?">NAO</option> </select> </div> <div class="col-md-6"> <input id="batismoDizimistaJustificativa" name="batismoDizimistaJustificativa" type="text" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="batismoRepresentante">Representante</label> <div class="col-md-3"> <select id="batismoRepresentante" name="batismoRepresentante" class="form-control auto-placeholder" data-target="#batismoRepresentantePar"> <option value="PAI" data-placeholder="Informe nome da MAE">PAI</option> <option value="MAE" data-placeholder="Informe nome do PAI">MAE</option> <option value="PADRINHO" data-placeholder="Informe nome da MADRINHA">PADRINHO</option> <option value="MADRINHA" data-placeholder="Informe nome do PADRINHO">MADRINHA</option> </select> </div> <div class="col-md-6"> <input id="batismoRepresentantePar" name="batismoRepresentantePar" type="text" class="form-control input-md"> </div> </div> </div> <div id="Comunhao" style="display: none;"> <div class="form-group"> <label class="col-md-2 control-label" for="comunhaoNome">Nome</label> <div class="col-md-9"> <input id="comunhaoNome" name="comunhaoNome" type="text" placeholder="Informe nome completo conforme certidão de nascimento" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="comunhaoLocalDataNascimento">Data Nascimento</label> <div class="col-md-9"> <input id="comunhaoLocalDataNascimento" name="comunhaoLocalDataNascimento" type="date" placeholder="Informe data de nascimento" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="comunhaoLocalDataNascimento">Local Nascimento</label> <div class="col-md-9"> <input id="comunhaoLocalDataNascimento" name="comunhaoLocalDataNascimento" type="text" placeholder="Informe local de nascimento" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="comunhaoDizimista">É batizado?</label> <div class="col-md-3"> <select id="comunhaoDizimista" name="comunhaoDizimista" class="form-control"> <option value="1">SIM</option> <option value="2">NAO</option> </select> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="comunhaoDizimista">Familia dizimista?</label> <div class="col-md-3"> <select id="comunhaoDizimista" name="comunhaoDizimista" class="form-control auto-placeholder" data-target="#comunhaoDizimistaJustificativa"> <option value="SIM" data-placeholder="Qual comunidade?">SIM</option> <option value="NAO" data-placeholder="Porque?">NAO</option> </select> </div> <div class="col-md-6"> <input id="comunhaoDizimistaJustificativa" name="comunhaoDizimistaJustificativa" type="text" class="form-control input-md"> </div> </div> </div> <div id="Crisma" style="display: none;"> <div class="form-group"> <label class="col-md-2 control-label" for="crismaNome">Nome</label> <div class="col-md-9"> <input id="crismaNome" name="crismaNome" type="text" placeholder="Informe nome completo conforme certidão de nascimento" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="crismaDataNascimento">Data Nascimento</label> <div class="col-md-9"> <input id="crismaDataNascimento" name="crismaDataNascimento" type="date" placeholder="Informe data de nascimento" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="crismaLocalDataNascimento">Local Nascimento</label> <div class="col-md-9"> <input id="crismaLocalNascimento" name="crismaLocalNascimento" type="text" placeholder="Informe local de nascimento" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="crismaDizimista">É batizado?</label> <div class="col-md-3"> <select id="crismaDizimista" name="crismaDizimista" class="form-control"> <option value="1">SIM</option> <option value="2">NAO</option> </select> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="crismaPirmeiraComunao">Possui 1º Comunhão?</label> <div class="col-md-3"> <select id="crismaPirmeiraComunao" name="crismaPirmeiraComunao" class="form-control"> <option value="1">SIM</option> <option value="2">NAO</option> </select> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="crismaDizimista">Familia dizimista?</label> <div class="col-md-3"> <select id="crismaDizimista" name="crismaDizimista" class="form-control auto-placeholder" data-target="#crismaDizimistaJustificativa"> <option value="SIM" data-placeholder="Qual comunidade?">SIM</option> <option value="NAO" data-placeholder="Porque?">NAO</option> </select> </div> <div class="col-md-6"> <input id="crismaDizimistaJustificativa" name="crismaDizimistaJustificativa" type="text" class="form-control input-md"> </div> </div> </div> <div id="Noivo" style="display: none;"> <div class="form-group"> <label class="col-md-2 control-label" for="crismaNome">Conjuge</label> <div class="col-md-9"> <input id="crismaNome" name="crismaNome" type="text" placeholder="Informe nome completo conforme certidão de nascimento" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="comunhaoDataNascimento">Data Nascimento</label> <div class="col-md-9"> <input id="comunhaoDataNascimento" name="comunhaoDataNascimento" type="date" placeholder="Data de nascimento do conjuge" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="comunhaoLocalNascimento">Local Nascimento</label> <div class="col-md-9"> <input id="comunhaoLocalNascimento" name="comunhaoLocalNascimento" type="text" placeholder="Local de nascimento do conjuge" class="form-control input-md"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="crismaDizimista">É batizado?</label> <div class="col-md-3"> <select id="crismaDizimista" name="crismaDizimista" class="form-control"> <option value="1">SIM</option> <option value="2">NAO</option> </select> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="crismaPirmeiraComunao">Possui 1º Comunhão?</label> <div class="col-md-3"> <select id="crismaPirmeiraComunao" name="crismaPirmeiraComunao" class="form-control"> <option value="1">SIM</option> <option value="2">NAO</option> </select> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="crismaPirmeiraComunao">Crismado?</label> <div class="col-md-3"> <select id="crismaPirmeiraComunao" name="crismaPirmeiraComunao" class="form-control"> <option value="1">SIM</option> <option value="2">NAO</option> </select> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="crismaDizimista">Familia dizimista?</label> <div class="col-md-3"> <select id="crismaDizimista" name="crismaDizimista" class="form-control"> <option value="1">SIM</option> <option value="2">NAO</option> </select> </div> <div class="col-md-6"> <input id="crismaDizimistaJustificativa" name="crismaDizimistaJustificativa" type="text" placeholder="Se SIM, qual comunidade? Se NÃO, qual motivo?" class="form-control input-md"> </div> </div> </div> </fieldset> <button class="btn btn-primary" type="submit">Enviar</button> </form>

form { margin: 20px; }

$(document).ready(function () { $('#inscricaoPara').on('change',function(){ $("#Batismo").hide(); $("#Comunhao").hide(); $("#Crisma").hide(); $("#Noivo").hide(); if ($(this).val()==1) $("#Batismo").show(); else if($(this).val()==2) $("#Comunhao").show(); else if($(this).val()==3) $("#Crisma").show(); else if($(this).val()==4) $("#Noivo").show(); }); $('#casamentoIgreja').on('change',function(){ $("#DetalheCasamentoIgreja").hide(); if ($(this).val()=="SIM") $("#DetalheCasamentoIgreja").show(); }); $('#separadoMatrimonio').on('change',function(){ $("#SeparadoNovoRelacionamento").hide(); if ($(this).val()=="NAO") $("#SeparadoNovoRelacionamento").show(); }); $('#separadoRelacionamento').on('change',function(){ $("#SeparadoMatrimonioRealiza").hide(); if ($(this).val()=="SIM") $("#SeparadoMatrimonioRealiza").show(); }); $('#estadoCivil').on('change',function(){ $("#Solteiro").hide(); $("#Casamento").hide(); $("#Divorciado").hide(); $("#Viuvo").hide(); $("#UniaoEstavel").hide(); $("#Separado").hide(); if ($(this).val()=="Solteiro") $("#Solteiro").show(); else if($(this).val()=="Casado") $("#Casamento").show(); else if($(this).val()=="Divorciado") $("#Divorciado").show(); else if($(this).val()=="Viuvo") $("#Viuvo").show(); else if($(this).val()=="União Estavel") $("#UniaoEstavel").show(); else if($(this).val()=="Separado") $("#Separado").show(); }); }); $.fn.change_placeholder = function(){ return this.each(function(){ var $this = $(this); var elem = $($this.data('target')); $this.on('change', function(){ elem.prop('placeholder', $this.find('option:selected').data('placeholder')); }).trigger('change'); }); }; $('.auto-placeholder').change_placeholder();