Ocultando campo com JS.

136 views
Skip to first unread message

Lippert

unread,
Dec 16, 2009, 8:24:54 AM12/16/09
to Cake PHP Português
Galera estou com o seguinte problema, tenho um form com dados padrões
mas um é especial, quando o campo "estado civil" é marcado como
solteiro(ex) ele tem que abrir/ocultar mais uns campos para o usuário
inserir o restante dos campos. Eu fiz isso:

-> View:
<tr>
<td class="rotulo">Estado Civil:*</td>
<td class="campo"><? echo $form->input("estado_civil_id",array("id"
=> "estado_civil_id","type" => "select","options" =>
$Estadocivil,"div" => false,"label" => false)); ?></td>
</tr>

-> Js

$("#estado_civil_id").blur( function() { Manter.valida(); });
valida : function(){
var estado_civil_id = jQuery.trim($("#estado_civil_id :selected").val
());
if (estado_civil_id == 1) {
$('#fulano').attr("disabled", true); //Assim só desativa eu
queria ocultar.
},

Podem me ajudar?

ad...@cakephp.com.br

unread,
Dec 16, 2009, 8:31:56 AM12/16/09
to cake-...@googlegroups.com
Usando jQuery no meu cadastro, pra ocultar/mostrar campos se cliente for
fisico ou juridico


no add.ctp

<script type="text/javascript">
$(document).ready(function(){
$("#fisico").hide();
$("#juridico").hide();
});
</script>


<div id="myform">
<h3>Cadastre-se</h3>

<form>
<input onclick="javascript: $('#fisico').show('slow');
$('#juridico').hide('slow');" type="radio" name="subscribe" value="1" />
<label>Fisico</label>
<br />

<input onclick="javacript: $('#juridico').show('slow');
$('#fisico').hide('slow');" type="radio" name="subscribe" value="0" />
<label>Juridico</label>
<br />

<div id="email">
<label>CPF: </label>
<input type="text" name="cpf">
</div>

<div id="email2">
<label>CNPJ: </label>
<input type="text" name="cnpj">
</div>
</form>
</div>


Veja se isso te ajuda

Abs
Bill




On Wed, 16 Dec 2009 05:24:54 -0800 (PST), Lippert
<lippert...@gmail.com>
wrote:
> --
>
> Você está recebendo esta mensagem porque se inscreveu no grupo "Cake
PHP
> Português" dos Grupos do Google.
> Para postar neste grupo, envie um e-mail para
cake-...@googlegroups.com.
> Para cancelar a inscrição nesse grupo, envie um e-mail para
> cake-php-pt...@googlegroups.com.
> Para obter mais opções, visite esse grupo em
> http://groups.google.com/group/cake-php-pt?hl=pt-BR.

Gabriel Gilini

unread,
Dec 16, 2009, 10:35:52 AM12/16/09
to cake-...@googlegroups.com
2009/12/16 <ad...@cakephp.com.br>:
> Usando jQuery no meu cadastro, pra ocultar/mostrar campos se cliente for
> fisico ou juridico
>
>
> no add.ctp
>
> <script type="text/javascript">
> $(document).ready(function(){
>   $("#fisico").hide();
>   $("#juridico").hide();
> });
> </script>
>
>
> <div id="myform">
>        <h3>Cadastre-se</h3>
>
>        <form>
>                <input onclick="javascript: $('#fisico').show('slow');
> $('#juridico').hide('slow');" type="radio" name="subscribe" value="1" />

Claramente você está confundindo o _pseudoprotocolo_ `javascript:'
nesse atributo `onclick'.

Existem pessoas que criam links como:

<a href="javascript:window.alert('oi');">clique aqui</a>

O que não é recomendado por mais de um motivo.

Mas o valor de um atributo `onclick' é utilizado para criar uma
função, que por sua vez é atribuída ao identificador `onclick' do
elemento em questão. Algo como:

elementoInput.onclick = new Function( event,
elementoInput.getAttribute('onclick') );

O que geraria uma função similar a:

function onclick(event)
{
javascript: $('#fisico').show('slow'); $('#juridico').hide('slow');
}

Como o ECMAScript e suas implementações suportam algo chamado
"Labelled Statements", que comumente é usado para `goto' em outras
linguagens, mas no nosso caso para labelled break e continue; a sua
função é executada sem erro algum, independentemente do engano.

Achei que valia a explicação :)

Bottom line: pode tirar o `javascript:' do seu código.

>                <label>Fisico</label>
>                <br />
>
>                <input onclick="javacript: $('#juridico').show('slow');
> $('#fisico').hide('slow');" type="radio" name="subscribe" value="0" />
>                <label>Juridico</label>
>                <br />
>
>                <div id="email">
>                        <label>CPF: </label>
>                        <input type="text" name="cpf">
>                </div>
>
>                <div id="email2">
>                        <label>CNPJ: </label>
>                        <input type="text" name="cnpj">
>                </div>
>        </form>
> </div>

De qualquer forma, aqui vai a minha solução simplificada para essa
função. Vejam que manipulando *uma* propriedade de *um* elemento - o
className do form -, tem como reproduzir essa funcionalidade.

Obviamente que se você quiser usar efeitos de transição vai precisar
de algo um pouco mais elaborado, mas também não seria algo que precise
de uma lib inteira.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
window.onload = function(){
var f = document.getElementById('myform');
if(f)
{
f.className = 'js';
}
f = null;
};

function setFisico()
{
var f = document.getElementById('myform');
f.className = 'fisico';
f = null;
}

function setJuridico()
{
var f = document.getElementById('myform');
f.className = 'juridico';
f = null;
}
</script>

<style type="text/css" rel="stylesheet">
.js div
{
display: none;
}

.juridico #fisico
{
display: none;
}

.fisico #juridico
{
display: none;
}
</style>
</head>
<body>
<div id="myform">
<h3>Cadastre-se</h3>

<form>
<input onclick="setFisico()" type="radio"
name="subscribe" value="1" />
<label>Fisico</label>
<br />

<input onclick="setJuridico()" type="radio"
name="subscribe" value="0" />
<label>Juridico</label>
<br />

<div id="fisico">
<label>CPF: </label>
<input type="text" name="cpf">
</div>

<div id="juridico">
<label>CNPJ: </label>
<input type="text" name="cnpj">
</div>
</form>
</div>
</body>
</html>

PS: desculpem-me por sair um pouco do assunto do grupo

--
Gabriel Gilini

www.usosim.com.br
gab...@usosim.com.br

ad...@cakephp.com.br

unread,
Dec 16, 2009, 10:43:05 AM12/16/09
to cake-...@googlegroups.com
Hehheeh, vou ser sincero, num manjo nada de javascript, ajax e tal, comecei
montar o script e funcionou como eu precisava, é válida sua observação,
pq realmente preciso aprender mais sobre!

Valeu
Bill



On Wed, 16 Dec 2009 13:35:52 -0200, Gabriel Gilini <gab...@usosim.com.br>
wrote:

Edinei Luis Cipriani

unread,
Dec 16, 2009, 11:19:52 AM12/16/09
to cake-...@googlegroups.com
<script>
$(function(){
if($('#ModelEstadoCivilId').is(':selected')){
$('#fulano').hide();
}else{
$('#fulano').show();
}
});
</script>

Ve se é isso...

Lippert

unread,
Dec 17, 2009, 6:18:53 AM12/17/09
to cake-...@googlegroups.com
Não deu certo Edinei...

--
Rafael Lippert,
Cel. (49)8403-7787
msn: lipp...@hotmail.com
gtalk: lippert...@gmail.com
Adm: http://www.mafagafo.com.br
---
Twitter Pessoal: http://www.twitter.com/lippertt
Twitter Profissional: http://www.twitter.com/mafagafoblog
----
Bacharel Sistemas de Informação.
Pós - Desenvolvimento de Sistemas para Web.





2009/12/16 Edinei Luis Cipriani <phpe...@gmail.com>

Edinei L. Cipriani

unread,
Dec 17, 2009, 7:00:14 AM12/17/09
to cake-...@googlegroups.com
<script>
       $(function(){
               if($('select option :selected')){

                       $('#fulano').hide();
               }else{
                       $('#fulano').show();
               }
       });
</script>


 


2009/12/17 Lippert <lippert...@gmail.com>



--
Edinei L. Cipriani
Blog: http://phpedinei.wordpress.com
Twitter: http://www.twitter.com/phpedinei

Desenvolvedor Colégio Trilingue Inovação
Site: http://www.colegioinovacao.com.br
Cursando Sistemas de Informação  - Unoesc Chapecó 1 Período
Integrante do grupo Fool N Lost de algoritimos computacionais
Fone 49 84149086
Reply all
Reply to author
Forward
0 new messages