Ir para conteúdo

POWERED BY:

Arquivado

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

girotto000

Clicar no botão abre o formulário

Por , em Javascript

Recommended Posts

girotto000    0

girotto000
Postado

Queria um sistema simples, que procurei aqui pelo fórum e não achei um igual

É o seguinte, ao entrar na página o usuário se depara com duas 'checkbox', uma do primeiro formulário e outroa do segundo, e isso basicamente funcionaria assim:

Se o usuário clica no checkbox 1, abre o formulário 1, se clica no checkbox 2, abre o formulário 2!

Importante: Nenhum dos dois checkbox devem estar marcados!

Att.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

Amigo, fiz um exemplo +/-

Agora estude o script e desenvolva conforme necessita.

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
 
#form1 {
width:400px;
height:400px;
background-color:#030;
display:none;
float:left;
}
 
#form2 {
display:none;
width:400px;
height:400px;
float:right;
background-color:#ff0000;
}
 
.clear {
clear:both;
}
 
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("[name='formulario']").click(function(){
var valor = $(this).val();
if(valor == "form1"){
$("#form1").show();
}
 
if(valor == "form2"){
$("#form2").show();
}
});
});
</script>
</head>
 
<body>
 
FORMULÁRIO 1 <input type="checkbox" name="formulario" value="form1" id="check1" />
FORMULÁRIO 2 <input type="checkbox" name="formulario" value="form2"  id="check2" />
 
<div class="clear"></div>
<div id="form1">
 
 
</div>
 
<div id="form2">
 
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

girotto000    0

girotto000
Postado

Excelente! Mas queria saber se tem como botar um efeito de java para quando eu selecionar o segundo formulário, o primeiro sumir!

E outra, aquele efeito de quando clicar no checkbox, o formulário meio que descer tipo uma animação, não aparecer do nada x:

Aguardando xD

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

Cara, tem que procurar.
Aqui ninguém vai te dar nada pronto.

 

E é JavaScript ou jQuery e não Java.

 

Segue

 

//aparecer
$("#form2").fadeIn('slow');
 
//sumir
$("#form2").fadeOut('slow');

Compartilhar este post

Link para o post
Compartilhar em outros sites

girotto000    0

girotto000
Postado

Bru_ce, primeiramente muito obrigado, o javascript já está 100%.

Somente o que falta, e eu realmente de coração, tentei procurar e não achei, é quando selecionar o outro radio (eu mudei de função de checkbox para um radio) o que estava sendo mostrado esconder!

Não sei como fazer isso e procurei bastante na internet, mas sem sucesso :(

Espero que não fique bravo e possa me ajudar..

Att.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

Você tem que verificar se o botão esta checado ou não ..

 

Da uma estudada nessa linha e tenta fazer algo, caso não consiga eu faço para você.

 

 

 

if($("[name='topico1']").is(':checked') == false)){
// suas ações
}

 

Abs

Compartilhar este post

Link para o post
Compartilhar em outros sites

girotto000    0

girotto000
Postado

Meu Dreamwaver está acusando um syntax error nesta linha.

Mas pelo o que eu li, basicamente só entendi isso aqui: if($("[name=topico1]").is(':checked') que no caso seria, se o radio numero 1 estiver aberto, não entendi o que aquele "false" está significando no código..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

false = falso !
resumindo, se o campo com nome topico 1 não estiver checado !

 

if($("[name='topico1']").is(':checked') == false))

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito