Ir para conteúdo

Arquivado

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

Marcelo Pescador

Mostra campos após selecionar no chekbox

Recommended Posts

Boa tarde a todos,

 

Eu tenho o seguinte código que já está funcionando:

<script>
function aparece(){
if(document.getElementById("fisica").checked){
document.forms[0].campofis_01.style.visibility="visible";
document.forms[0].campofis_02.style.visibility="visible";

document.forms[0].campojuri_01.style.visibility="hidden";
document.forms[0].campojuri_02.style.visibility="hidden";
}
else {
document.forms[0].campofis_01.style.visibility="hidden";
document.forms[0].campofis_02.style.visibility="hidden";

document.forms[0].campojuri_01.style.visibility="visible";
document.forms[0].campojuri_02.style.visibility="visible";
}
}
</script>

<form>
<input type="radio" id="fisica" onclick="aparece()" name="campo">Pessoa Física <br>
<input type="radio" id="juridica" onclick="aparece()" name="campo">Pessoa juridica<br>

<input name="campofis_01" type="text" style="visibility:hidden;" value="Fis 1"><br>
<input name="campofis_02" type="text" style="visibility:hidden;" value="Fis 2"><br>

<input name="campojuri_01" type="text" style="visibility:hidden;" value="Jur 1"><br>
<input name="campojuri_02" type="text" style="visibility:hidden;" value="Jur 2"><br>

</form>

Eu gostar que os campos mostrados para cadastrar aparecessem formatados da seguinte forma:

 

Cadastro Pessoa Física:

<table width="350" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="2">Cadastro Pessoa Física</td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td width="127">CampoFisio_1:</td>
    <td width="223"><input type="text" name="campofis_" size="40" value="Fis 1"></td>
  </tr>
  <tr>
    <td>CampoFisio_2:</td>
    <td><input type="text" name="campofis_2" size="40" value="Fis 2"></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
</table>

Cadastro Pessoa Jurídica:

<table width="350" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="2">Cadastro Pessoa Jurídica</td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td width="127">CampoJurid_1::</td>
    <td width="223"><input type="text" name="campojuri_1" size="40" value="Jur 1"></td>
  </tr>
  <tr>
    <td>CampoJurid_2:</td>
    <td><input type="text" name="campojuri_2" size="40" value="Jur 2"></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
</table>

Ou seja, que apareça vários campos para um cadastro.

 

Obrigado a todos.

Compartilhar este post


Link para o post
Compartilhar em outros sites

usa jquery, vc pode criar até DIV´s especifícas para cada tipo de cadastro, ou seja, clicou em pessoa física ele abre apenas a DIV de pessoa física

Compartilhar este post


Link para o post
Compartilhar em outros sites

A DIV para os campos eu cheguei a criar, mas não consegui chamar ela.

 

Eu montei assim:

<div id="campofis_01" class="invisivel">
        <input type="text" name="campofis_1" size="40" value="Fis 1">
        </div>

Mas não sei como fazer para deixar ela invisível e chamar ao selecioar no checkbox!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

olha este exemplo simples de Exibir/Esconder elementos

Código:

<script type="text/javascript">
$(function(){
$("#for-block1")
.click(function(){
$("#block1").hide();
});

$("#for-block2")
.click(function(){
$("#block2").show();
});

$("#for-block3")
.click(function(){
$("#block3").toggle();
});

$("#fadeout-block1")
.click(function(){
$("#block1")
.show()
.hide("slow");
});

$("#fadein-block2")
.click(function(){
$("#block2")
.hide()
.show("slow");
});
});
</script>

 

 

 

<style type="text/css">
#block1, #block2, #block3 {
height: 25px;
line-height: 25px;
padding: 0 10px;
}

#block1 {
background: green;
}

#block2 {
background: yellow;
display: none;
}

#block3 {
background: blue;
}

#container {
height: 75px;
}
</style>

 

 

 

<div id="container">

<div id="block1">Bloco 1</div>
<div id="block2">Bloco 2</div>
<div id="block3">Bloco 3</div>
</div>
<p>
<button id="for-block1">Esconder bloco 1</button>
<button id="for-block2">Exibir bloco 2</button>
<button id="for-block3">Alternar bloco 3</button>
<button id="fadeout-block1">Esconder bloco 1 (animação)</button>
<button id="fadein-block2">Exibir bloco 2 (animação)</button>
</p>

Compartilhar este post


Link para o post
Compartilhar em outros sites

verifique o caminho no js

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá Marcelo,

 

Não precisa separar não, apenas precisa inserir o arquivo principal do jquery.

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

 

Agora funciona.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Feche seu primeiro </script>

 

E abra no segundo <script>

 

Refaça os testes

Compartilhar este post


Link para o post
Compartilhar em outros sites

beleza

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você pode depois também fazer, que fica legal, seria como abas (pode ser aquelas que ficam "grudadas" na lateral dá página, que ao clicar abre seu form. Dá um efeito interessante

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.