(Resolvido) layer

lenowds · Julho 1, 2008

Galera seguinte, eu tenho um form, e nesse form tenho um listbox, onde se a pessoa clicar em casado, eu tenho que fazer com que apareça o resto do form, nesse caso, são campos input, como nome do conjuge, data nascimento coisa assim... esses campos vao estar como se fosse hidden, e so seria mostrado se entrar na condição a cima.

se alguém souber como eu posso fazer isso eu agradeço.

meu codigo

<td>
    <select name="flag_estado_civil" id="flag_estado_civil" onBlur='Teste();'>
    <option value="001">Casado (a) </option>
     <option value="002">Solteiro (a) </option>
    <option value="003">Divorciado (a)</option>
    <option value="004">Desquitado (a)</option>
     <option value="005">Viuvo (a) </option>
    <option value="006">Separado (a) </option>
    <option value="010">Amaziado </option>
    <option value="011">Outros </option>
    <option value="013">não Informado </option>
    <option value="014" selected='selected'> -&nbsp; -&nbsp; -&nbsp; -&nbsp; -&nbsp; -</option>
    </select> 
        <input type="checkbox" id="opcao" onclick="Teste();"/> op
        </td>
       <td>&nbsp;</td>
</tr>
<div class="layer" id="layer" name="layer">
<tr id="NmConj" class="layer" >
    <th><label for="conjuge">Nome Conjuge:</label></th>
    <td><input type="text" name="nome_conjuge" id="nome_conjuge" value="" size="50" maxlength="40" tabindex="1" /></td>
        <td>&nbsp;</td>
</tr>
<tr id="CPFConj" class="layer" >
    <th><label for="cpf_conj">CPF:</label></th>
    <td><input type="text" name="cpf_conj" id="cpf_conj" value="" maxlength="12" tabindex="1"/></td>
    <td>&nbsp;</td>
</tr>
</div>

Estilo CSS

.layer{
    cursor: default;
    position: absolute;
    padding: 50px, 0px;
    margin-left: 30px;
    width:400px;
    height:150px;
    z-index:2;
    visibility: hidden;
    overflow: hidden;
    left: 50px;
    top: 50x;
    background-color: #EEEEEE; 
}

funcao JS

function Teste(){
                    if (document.getElementById("nome_conjuge").style.visibility == 'hidden'){
                        document.getElementById("nome_conjuge").style.display = 'visible';
                    }    
                    else{                
                            document.getElementById("NmConj").style.visibility == 'hidden';
                        }
                    if (document.getElementById("cpf_conj").style.visibility == 'hidden'){
                        document.getElementById("cpf_conj").style.visibility == 'visible';
                    }    
                    else{                
                            document.getElementById("CPFConj").style.visibility == 'hidden';
                        }
}

Editado Julho 1, 2008 por fercosmig
Adicionar tag CODE

Mestereko · Julho 1, 2008

hum... fiz um esquema diferente aqui... sem os layers... só com uma div que contém tudo... veja se é o q você precisa:

java script:

<script language="JavaScript" type="text/javascript">
    function ShowHideDIV(NomeDIV, Valor){
    Valor = document.getElementById("Lista").value;
    if (Valor=="1") {
    document.getElementById(NomeDIV).style.display = "block";
    } else {
    document.getElementById(NomeDIV).style.display = "none";
    }
    }
</script>

html:

<body>
<form name="Teste">
Tipo: <select name="Lista" size="1" id="Lista" onChange="ShowHideDIV('CampoOculto','1');">
    <option value="1">Casado (a) </option>
    <option value="2">Solteiro (a) </option>
    <option value="3">Divorciado (a)</option>
    <option value="4">Desquitado (a)</option>
    <option value="5">Viuvo (a) </option>
    <option value="6">Separado (a) </option>
    <option value="10">Amaziado </option>
    <option value="11">Outros </option>
    <option value="13">não Informado </option>
    <option value="14" selected='selected'> -&nbsp; -&nbsp; -&nbsp; -&nbsp; -&nbsp; -</option>
</select><br><br>
<div id="CampoOculto" style="display: none;">
<label>Nome do Conjuge</label><br>
<input type="text" name="nome" id="nome"><br>
<br>
<label>CPF do Conjuge</label><br>
<input type="text" name="cpf" id="cpf"><br>
</div>
</form>
</body>

qualquer coisa, posta ae -_-

lenowds · Julho 1, 2008

hum... fiz um esquema diferente aqui... sem os layers... só com uma div que contém tudo... veja se é o q você precisa:

java script:

&lt;script language="JavaScript" type="text/javascript">
    function ShowHideDIV(NomeDIV, Valor){
    Valor = document.getElementById("Lista").value;
    if (Valor=="1") {
    document.getElementById(NomeDIV).style.display = "block";
    } else {
    document.getElementById(NomeDIV).style.display = "none";
    }
    }
</script>

html:

<body>
<form name="Teste">
Tipo: <select name="Lista" size="1" id="Lista" onChange="ShowHideDIV('CampoOculto','1');">
    <option value="1">Casado (a) </option>
    <option value="2">Solteiro (a) </option>
    <option value="3">Divorciado (a)</option>
    <option value="4">Desquitado (a)</option>
    <option value="5">Viuvo (a) </option>
    <option value="6">Separado (a) </option>
    <option value="10">Amaziado </option>
    <option value="11">Outros </option>
    <option value="13">não Informado </option>
    <option value="14" selected='selected'> -&nbsp; -&nbsp; -&nbsp; -&nbsp; -&nbsp; -</option>
</select><br><br>
<div id="CampoOculto" style="display: none;">
<label>Nome do Conjuge</label><br>
<input type="text" name="nome" id="nome"><br>
<br>
<label>CPF do Conjuge</label><br>
<input type="text" name="cpf" id="cpf"><br>
</div>
</form>
</body>

qualquer coisa, posta ae -_-

........................................................................

mestereko, poh cara eu até que achei legal meu..mais ai eu vu ter outro problema pra arrumar de novo minha tabela, é que esse div vai ficar bem no meio de uma table, se eu por esse div no meio complica, tudo...com visual do form,

se você souber como que posso fazer sem ter que mecher no design da tabela... eu Agradeço...

vlw

JuanHBiscaia · Julho 1, 2008

aqui é o mestereko, tive problemas com meu login e precisei criar um novo, nada demais, fica melhor com meu nome verdadeiro.... quanto ao seu problema, tenta assim:

estilo css:

.layer{
    cursor: default;
    position: absolute;
    padding: 50px, 0px;
    margin-left: 30px;
    width:400px;
    height:150px;
    z-index:2;
    overflow: hidden;
    left: 50px;
    top: 50x;
    background-color: #EEEEEE;
    display: none;
}

note que aqui eu removi a linha "visibility: hidden;" e adicionei a linha "display: none;" código java script:

<script language="JavaScript" type="text/javascript">
    function mostra(NomeDIV, Valor){
        Valor = document.getElementById("flag_estado_civil").value;

        if (Valor=="001")
        {
          document.getElementById(NomeDIV).style.display = "block";
        }
        else 
        {
          document.getElementById(NomeDIV).style.display = "none";
        }
    }
</script>

continua quase a mesma coisa, só adaptei ao seu html e o código html:

<td>
    <select name="flag_estado_civil" id="flag_estado_civil" onChange="mostra('layer','001');">
    <option value="001">Casado (a) </option>
    <option value="002">Solteiro (a) </option>
    <option value="003">Divorciado (a)</option>
    <option value="004">Desquitado (a)</option>
     <option value="005">Viuvo (a) </option>
    <option value="006">Separado (a) </option>
    <option value="010">Amaziado </option>
    <option value="011">Outros </option>
    <option value="013">não Informado </option>
    <option value="014" selected='selected'> -&nbsp; -&nbsp; -&nbsp; -&nbsp; -&nbsp; -</option>
    </select>
        <input type="checkbox" id="opcao" onclick="Teste();"/> op
        </td>
       <td>&nbsp;</td>
</tr>
<div class="layer" id="layer" name="layer">
<tr id="NmConj" class="layer" >
    <th><label for="conjuge">Nome Conjuge:</label></th>
    <td><input type="text" name="nome_conjuge" id="nome_conjuge" value="" size="50" maxlength="40" tabindex="1" /></td>
        <td>&nbsp;</td>
</tr>
<tr id="CPFConj" class="layer" >
    <th><label for="cpf_conj">CPF:</label></th>
    <td><input type="text" name="cpf_conj" id="cpf_conj" value="" maxlength="12" tabindex="1"/></td>
    <td>&nbsp;</td>
</tr>

aqui também continua a mesma coisa, só mudei algumas coisas como o evento pra chamar a function js

eu fiz uns testes aqui e funcionou numa boa, mostra as layers da div com o estilo que você criou, na posição que elas devem estar conforme você colocou... veja o que dá ai no seu sistema...

qualquer coisa, posta ae -_-

Editado Julho 1, 2008 por JuanHBiscaia

lenowds · Julho 2, 2008

Que foda em cara, perder o login é foda...

Mais voltando ao assunto...

Agora deu Certo, logo depois que eu postei o ultimo post, eu penssei em mecher no css, e arrumar na mao mesmo...

então foi o que eu fiz.. mais só depois que vi seu post, então ficou assim..

OBS[show de bola]

.css
.layer{//FOLHA DE ESTILO DO MEU DIV, ONDE EU TIVE QUE CRIAR UM TABLE DENTRO, 
    position: ralative;
    margin-left: 0px;
    margin-bottom : 0px;
    width:520px;
    height:100px;
    z-index:2;
    display: none;
    left: 200px;
    top: 50x;
}
div table th {//FOLHA DE ESTILO PRO MEU TITULO DE CADA TD
    border-width: 1px;
    border-color: #0000FF;
    width:400px;
}
.Divtd{//FOLHA DE ESTILO PRO MEU TD, SE EU não FIZECE ISSO não IRIA DAR CERTO, SÓ POR CAUSA DISSO, ACRETITE
    width:315px;
}

.js
function mostra(NomeDIV){
            Valor = document.getElementById("flag_estado_civil").value;
            if (Valor=="001" || Valor=="010" ){//ACRESENTEI UMA NOVA CONDIÇÃO, MAIS O RESTO CONTINUOU NA MESMO.
              document.getElementById(NomeDIV).style.display = "block";
            }
            else{
              document.getElementById(NomeDIV).style.display = "none";
            }
        }

.html

<select name="flag_estado_civil" id="flag_estado_civil" onChange="mostra('layer');">
                                    <option value="001">Casado (a) </option>
                                    <option value="002">Solteiro (a) </option>
                                    <option value="003">Divorciado (a)</option>
                                    <option value="004">Desquitado (a)</option>
                                    <option value="005">Viuvo (a) </option>
                                    <option value="006">Separado (a) </option>
                                    <option value="010">Amaziado </option>
                                    <option value="011">Outros </option>
                                    <option value="013">não Informado </option>
                                    <option value="014" selected='selected'> -&nbsp; -&nbsp; -&nbsp; -&nbsp; -&nbsp; -</option>
                                </select>

<div class="layer" id="layer" name="layer">
        <table border="0px">
            <tr id="NmConj" onMouseOver="Over(this);" onMouseOut="Out(this);">
                    <th><label for="conjuge">Nome Conjuge:<span class="obrg">*</span></label></th>
                    <td><input type="text" name="nome_conjuge" id="nome_conjuge" value="" size="50" maxlength="40" tabindex="1"                                                                onBlur="v_nome(this.value, this);"/></td>
        <td class="Divtd">&nbsp;</td>
            </tr>
                <tr id="CPFConj" onMouseOver="Over(this);" onMouseOut="Out(this);">
                   <th><label for="cpf_conj">CPF:<span class="obrg">*</span></label></th>
                    <td><input type="text" name="cpf_conj" id="cpf_conj" value="" maxlength="12" tabindex="1" onBlur="v_cpf(value, this);"/></td>
                    <td class="Divtd">&nbsp;</td>
                 </tr>
        </table>
</div>

Tah ai galera, vlw velho pela força.

até mais

Editado Julho 2, 2008 por fercosmig
Adicionar tag CODE

JuanHBiscaia · Julho 2, 2008

só uma coisa importante pra ressaltar... use os codebox pra postar seus scripts no forum, fica mais organizado e fácil de entender.....

se precisar de mais ajuda, n relute em postar cara... pergunta ae que a gente analisa...

:)

Editado Julho 2, 2008 por JuanHBiscaia

Entrar

(Resolvido) layer

Pergunta

lenowds

Link para o comentário

Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

Mestereko

Link para o comentário

Compartilhar em outros sites

lenowds

Link para o comentário

Compartilhar em outros sites

JuanHBiscaia

Link para o comentário

Compartilhar em outros sites

lenowds

Link para o comentário

Compartilhar em outros sites

JuanHBiscaia

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades