Ir para conteúdo
ghostdancing

mostrar/esconder

Por , em Javascript

Recommended Posts

ghostdancing    0

ghostdancing
Postado

Olá pessoal! Juro que quebrei a cabeça, mas como sempre, não estou enxergando algo. Se puderem me ajudar agradeço. Gostaria de apertar na <label> Entrar e aparecer o <form id="formlogin">, ao clicar novamente ele desaparecesse, e eu consegui fazer isso, mas eu quero também que ao clicar na <label> Cadastrar, o #formlogin desaparecesse e ficasse o #formcadas e vice-versa. Eis o código:

 

<head>
<style type="text/css">
 * { margin:0; padding:0; box-sizing:border-box; }

button {
  border: none;
  background-color: white;
  display:inline;} 

  #folo{
      position: relative; 
      top: 3px;
      left: 30px;
      background-color:lightgrey;
      max-width: 133px;

  }  
</style>

<head>
 

<body>
    <div id="folo" >
        <label id="entrarbtn" onclick="mostra();">Entrar</label> |<label onclick="mostra();"id="cadasbtn" onclick=""> Cadastro</label>
    </div>    
    <form id="formlogin" style="position: relative; top: 3px; left: 30px; display:none;">
        nome/e-mail:<br/>
        <input type="" name=""><br/>
        senha:<br/>
        <input type="" name=""><br/>
        <button>entrar</button>
    </form>

    <form id="formcadas" style="position: relative; top: 3px; left: 30px; display:none;">
        nome/e-mail:<br/>
        <input type="" name=""><br/>
        senha:<br/>
        <input type="" name=""><br/>
        <button>cadastrar</button>
    </form>

 

<script type="text/javascript">
    function mostra(){
        var login = document.getElementById("formlogin");
        if (login.style.display ==="none"){login.style.display = "inline-block";}
        else{ login.style.display ="none"}
    }
    function mostraum(){
        var cadas = document.getElementById("formcadas");
        if (cadas.style.display === "none"){cadas.style.display = "inline-block";}
        else{cadas.style.display = "none";}
    }

 

</script>
</hmtl>

Desse jeito funciona, mas as divs aparecem uma ao lado da outra e não é isso que eu queria. Agradeço desde já!

Compartilhar este post

Link para o post
Compartilhar em outros sites

michelmir    0

michelmir
Postado

Vê se te atende. No caso utilizei Jquery para ocultar e mostrar os formulários Cadastre-se e login. Quanto ao style utilizei o Bootstrap:

  

<!DOCTYPE html>
<html lang="pt-br">
<head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">

<head>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<head>

<body>

<div class="container" style="max-width:700px;">
<br>
<div align="center">
<p><h2>Selecione uma das opções abaixo</h2></p>
<br>
<div class="row">

<div class="col"><button type="button" class="btn btn-info btn-block" id="cadasbtn">CADASTRAR-SE</button></div>
<div class="col"><button type="button" class="btn btn-info btn-block" id="entrarbtn">FAZER LOGIN</button></div>

</div>
</div>
<br>
<div class="card" id="formlogin">
  <div class="card-header">
    FAÇA LOGIN
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <form>
  <div class="form-group">
    <label>E-mail</label>
    <input type="email" class="form-control" id="e-mail" placeholder="Insira o seu e-mail de cadastro">
  </div>
  <div class="form-group">
    <label>Senha</label>
    <input type="password" class="form-control" id="senha" placeholder="Insira a sua senha">
  </div>
    <button type="submit" class="btn btn-primary btn-block">FAZER LOGIN</button>
</form>
</div>
      
    </blockquote>
  </div>
  
  
  <div class="card" id="formcadas">
  <div class="card-header">
    CADASTRE-SE
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <form>
  <div class="form-group">
    <label>E-mail</label>
    <input type="email" class="form-control" id="e-mail" placeholder="Insira o seu e-mail de cadastro">
  </div>
  <div class="form-group">
    <label>Senha</label>
    <input type="password" class="form-control" id="senha" placeholder="Insira a sua senha">
  </div>
    <button type="submit" class="btn btn-primary btn-block">CADASTRAR</button>
</form>
</div>
      
    </blockquote>
  </div>
  
</div>


<br>

</body>
</html>

<script>

$('#formcadas').hide();
$('#formlogin').hide();
</script>

<script>

          $(document).ready(function(){
          $("#entrarbtn").click(function(){
            $("#formlogin").show();
            $("#formcadas").hide();
          });
          $("#cadasbtn").click(function(){
            $("#formlogin").hide();
            $("#formcadas").show();
          });
         });

</script>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • splemes1970
      Formulário com seleção textos predefinidos para envios de emails
      Por splemes1970
      Nome: Fulano de Tal     Texto_1 Olá bom dia, bla bla bla                   Email: Fulano@gmail.com     Texto_2 Olá boa tarde, bla bla bla                             Texto_3 Olá boa noite, bla bla bla                                     Seleção do Texto a enviar  ()                             Email a enviar   :  Digite o email  
       
           
      Preciso de um formulário  que o usuário possa enviar emails com textos predefinidos por eles, onde ele possa criar o seu cadastro com seu nome, seu email e seus textos predefinidos, e para enviar os email ele possa escolher o texto dentre os que ele predefiniu e emails que ele digite na hora do envio no formulário
    • Julle
      Formulário
      Por Julle
      Porquê esse erro estar acontecendo?
       
       
       
      Notice: Undefined index: action in C:\xampp\htdocs\PhpProject1\index.php on line 4
      Nome:  
      Idade:  
      E-mail: 
      sexo:  > Masculino  >Feminino 
      Curso:               > selecione...              > Ciência da Computação                > Bacharelando em Informática              > Engenharia da Computação   
                
      Conhecimento:  >Microdoft Word  >HTML  >JavaScript  >PHP 
       
       
       
      Código: 
      <!DOCTYPE html>
      <?php
          if($_REQUEST["action"] =="save")
          { 
              
              
              $formValid = True;
              
              $tamanho_nome = strlen($_POST["CAMPO_NOME"]);
              if($tamanho_nome < 5|| $tamanho_nome > 64)
              {
                  echo("O campo  'NOME' deve ter entre 5 e 64 caracteres.".$tamanho_nome);
                  $formValid = FALSE;
              }
              
              $idade = (int)$_POST["CAMPO_IDADE"];
              if(is_NaN($idade)|| $idade < 4 || $idade > 120)
              {
                  echo("O campo 'Idade' deve ter preenchido corretamente."); 
                  $formValid = false; 
              }
              $email = $_POST["CAMPO_EMAIL"];
              $regex = 
              "/^[^0-9][A-z0-9_]+([.][A-z0-9_]+)*[@][A-z0-9_]+([.][A-z0-9_]+)*[.][A-z]{2,4}$/";
              if(!preg_match($regex, $email))
              {
                  echo("O campo 'E-mail' deve ter preenchido corretamente.");
                  $formValid = FALSE;
              }
              $sexo = $_POST["CAMPO_SEXO"];        
              if($sexo != "M" && $sexo != "F")
              {
                  echo("O campo 'sexo' deve ser preenchido.");
                  $formValid = FALSE;
              }
              $curso = $_POST["CAMPO_CURSO"];
              if($curso == "" || $curso == "Selecione . . .")
              {
                  echo("A campo 'curso' deve ser preenchido.");
                  $formValid = FALSE;
              }
              $conhecimento = $_POST["CAMPO_CONHECIMENTO"];
              if(sizeof($conhecimento)!= 2)
              {
                  echo("É necessário marcar 2 conhecimento.");
                  $formValid = FALSE;
              }
              if($formValid)
              {
                  echo("Formulário validado com sucesso");
                  exit();
              }
              
          }
          
        ?>
      <html>
          <head>
              <title>EXEMPLO - formulário</title>
              <script language=" JavaScrip">
              function validaForm()
              {
                  var tamanho_nome = document.forms["meuForm"].CAMPO_NOME.value.length;
                  if(tamanho_nome <5 || tamanho_nome >64)
                  {
                      alert("O campo 'nome' deve ter entre 5 e 64 caracteres");
                      return false;
                  }
                  var idade = document.forms["meuForm"].CAMPO_IDADE.value;
                  if(is_NaN($idade)|| $idade < 4 || $idade > 120)
                  {
                      echo("O campo 'Idade' deve ter preenchido corretamente."); 
                      return false;
                  }
                  var email = document.forms["meuForm"].CAMPO_EMAIL.value;
                  if(email.length<5 || email.length > 128 ||email.index0f(@) = = -1 ||
                  email.index0f('.') == -1){
                      alert("O campo 'Email' deve ter preenchido corretamente.");
                      return false;
                  }
                  var campo_sexo = document.forms["meuForm"].CAMPO_SEXO;
                  var sexo = false; 
                  for(i=0; i<campo_sexo.length;i++){
                      if(campo_sexo.checked == true)
                      {
                          sexo = campo_sexo.value;
                          brack;
                      }
                  }
                  if(sexo == false)
                  {
                      alert("O campo 'sexo' deve ser preenchido.");
                      return false;
                  }
                  var opcao_curso = document.forms["meuForm"].CAMPO_CURSO.selectedIndex;
                  if(opcao_curso == 0)
                  {
                      alert("O campo 'curso' deve ser preenchhido");
                      return false;
                  }
                  var conhecimento = document.forms["meuForm"].elements['CAMPO_CONHECIMENTOS[]'];
                  var conhecimentosMarcados =0;
                  for(i=0; i<conhecimentos.length; i++)
                  {
                      if(conhecimento.checked == true)
                      {
                          conhecimentosMarcados++;
                      }
                  }
                  if(conhecimentosMarcados != 2)
                  {
                      alert("É necessário marcar 2 conhecimento");
                      return false;
                  }
                  document.forms["meuForm"].submit();
                  
              }
              </script>
          </head>
          <body>
              
          <form method="POST" action="?action=save" name="meuForm">
                  
                  Nome:  <input type=TEXT name= "CAMPO_NOME" value=" <? echo $_POST[' CAMPO_NOME'];?>">
              <br>Idade: <input type=TEXT name="CAMPO_IDADE"  value="<? echo $_POST['CAMPO_IDADE'];?>">
              <br>E-mail:<input type=TEXT name="CAMPO_EMAIL"  value="<? echo $_POST['CAMPO_EMAIL'];?>">
              <br>sexo: <input type=RADIO name="CAMPO_SEXO" value="M"
                          <? if($_POST['CAMPO_SEXO']== "M"){echo "checked";}?> > Masculino
                          <input type=RADIO nome="CAMPO_SEXO" value="F"
                          <? if($_POST['CAMPO_SEXO']== "F"){echo "checked";}?> >Feminino
                  
                  
              <br>Curso: <select name= "CAMPO_CURSO">
                  <option <? if($_POST['CAMPO_CURSO']=="selecione . . . ")
                      { echo "selected";}?> > selecione...</option>
                  <option <? if($_POST['CAMPO_CURSO'] == "Ciência da Computação")
                      { eecho "selected";}?> > Ciência da Computação </option>
                  <option <? if($_POST['CAMPO_CURSO']=="Bacharelando em Informática")
                      { echo "selected";}?>  > Bacharelando em Informática</option>
                  <option <? if($_POST['CAMPO_CURSO']== " Engenharia da Computação")
                      {echo "selected";}?> > Engenharia da Computação </option>
              </select>
              
              <br>Conhecimento:
              <input type =checkbox name=CAMPO_CONHECIMENTOS[] value="Word" 
                     <?if(in_aray("Word", $_POST['CAMPO_CONHECIMENTOS[]') != FALSE){echo "checked"; }?> >Microdoft Word
              <input type =checkbox name=CAMPO_CONHECIMENTOS[] value="HTML"
                  <?if(in_aray("HTML",  $_POST['CAMPO_CONHECIMENTOS[]') != FALSE)
                  {echo "checked"; }?> >HTML
              <input type =checkbox name=CAMPO_CONHECIMENTOS[] value="JS"
                   <?if(in_aray("JS",  $_POST['CAMPO_CONHECIMENTOS[]') != FALSE)
                  {echo "checked"; }?> >JavaScript
              <input type =checkbox name=CAMPO_CONHECIMENTOS[] value="PHP"
                   <?if(in_aray("PHP",  $_POST['CAMPO_CONHECIMENTOS[]') != FALSE)
                  {echo "checked"; }?> >PHP
                  
              <br>
              <input type=RESET value="Limpar">
              <input type=BUTTON onClick="validaform();"value="Enviar">
          </form>     
              
                  
                           
          </body>
      </html>
    • Lucas Jorge
      JQuery | Concatenando formulário
      Por Lucas Jorge
      Olá a todos, sou iniciante em Jquery e estou a horas batendo a cabeça com um problema, alguem pode me ajudar? Estou querendo juntar as informações deste formulário, concatenando elas em uma espécie de toString(), e informar a variavel concatenada a um input de texto. mas não estou conseguindo, alguem pode me ajudar a encontrar o erro estupido?
       
      HTML:
       
      Jquery
       
    • brunocechet
      Ajuda com OCR/ICR
      Por brunocechet
      Estou trabalhando com Python3 e tentando reconhecer essas imagens, mas sem resultados satisfeitos ainda.
       
      Eu tentei pytesseract e a Google Vision API seguindo este tutorial.
       
      Eu não sei o que eu poderia fazer para obter melhores resultados
       
      Alguém poderia tentar me ajudar?
       
      Obrigado antecipadamente
    • gabrielfalieri
      melhor forma para montar um form dinamico
      Por gabrielfalieri
      Bom dia.

      Eu estou tentando criar um form a partir de um resultado de um select.
       
      Eu tenho um formulário, onde a partir de esse formulário, eu faço um select e nesse select, tenho que criar um formulário a partir dele.

      Por exemplo.
      Seleciona as informações e a partir do modulo e tipo de licenciamento ele gera a query.
      Eu fiz um ajax, que envia esses dados selecionados para uma página php, onde essa página php, chama o crud para fazer o select. Uma vez feito, ele executa um select onde busca as informações. Nesse select se faz um print_r onde o ajax pega a informação salva e exibiria, gerando o form.
       
      Então ficaria assim.
       
      ajax que envia a requisição e imprimia os dados   
      var XMLHttp =  generateXMLHttp();                 XMLHttp.open("get", "classes/getData.php?tipoLicenciamento=" + tipoLicenciamento + "&modulo="+modulo+"&tipoComercializacao=" + tipoComercializacao, true);                 XMLHttp.onreadystatechange = function () {                          if (XMLHttp.readyState == 4){                         if (XMLHttp.status == 200) {                             var data = XMLHttp.responseText.split(/(\d+)(?=(?:\d{2}\/\d{2}\/\d{4}\sa))/);                             data = XMLHttp.responseText.split("#");                                  if(XMLHttp.responseText == ""){                                  }else{                                 alert(data[1]);                             }                                  XMLHttp.abort();                             //var obj = {};                              } else {                             result.innerHTML = "Um erro ocorreu: " + XMLHttp.statusText;                         }                     }                      };
      php que pega a informação e manda para a classe
          if(isset($_GET['tipoLicenciamento']) && isset($_GET['modulo']) && isset($_GET['tipoComercializacao'])){              $tipoLicenciamento = $_GET['tipoLicenciamento'];         $modulo = $_GET['modulo'];         if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){                  $PropostaComercial->getItens($tipoLicenciamento,$modulo);              }         else if(empty($result)){             $PropostaComercial->getItens($tipoLicenciamento,$modulo);         }         else{             $PropostaComercial->getItens($tipoLicenciamento,$modulo);         }          } php que executa a query e faz o retorno dos dados     
      $sql = "SELECT prt_produto_item.nome as nome_item, prt_produto_item.descricao as descricao_item, prt_produto_tipo_licenciamento.nome as nome_licenciamento,prt_produto_modulo.nome as nome_modulo FROM prt_produto_item_modulo_tipo JOIN prt_produto_item ON prt_produto_item_modulo_tipo._id_produto_item = prt_produto_item.id_produto_item JOIN prt_produto_tipo_licenciamento ON prt_produto_item_modulo_tipo._id_tipo_licenciamento = prt_produto_tipo_licenciamento.id_tipo_licenciamento JOIN prt_produto_modulo ON prt_produto_item_modulo_tipo._id_modulo = prt_produto_modulo.id_modulo   WHERE _id_modulo = ".$modulo." AND _id_tipo_licenciamento = ".$tipoLicenciamento.";";                      $stmt = DB::prepare($sql);                      $stmt->execute();                 foreach ($stmt->fetchAll() as $item => $value){                     $this->return =  "#".utf8_encode($value->nome_item);                     $this->return .= "#".utf8_encode($value->descricao_item);                     $this->return .= "#".utf8_encode($value->nome_licenciamento);                     $this->return .= "#".utf8_encode($value->nome_modulo);                     print_r($this->return);                 } Absolutamente tudo está funcionando bem, certinho. Só que eu estou com certa dificuldade de pegar esse retorno e montar o form. Os dados não seriam fácil de ser manipulados.
      Existem alguma forma mais fácil de se montar esse tipo de form?

       
×

Informação importante

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

  Aceito