-4

quero que quando coloque o login, o outro form apareça mas ele aparece por um frame de segundo e desaparece, por que ?? alguém me ajuda por favor ?

<html>
<head>

</head>
<body>
    <form onsubmit="return Verifica(this)">
        <span> Login:</span><input type="text" value="" name="usuario" id="login" >
        <span> Senha:</span> <input type="password" name="senha" value="" id="senha" >    
        <input type="submit">
    </form>
    <script>
    function Verifica(form){
        var user = form.usuario.value;
        var pass = form.senha.value;
        if( user == "1" && pass == "2"){
            alert("Sucesso");
            Visible();
        }else{
            alert("Falho");
            return false;
        }
    }

      function Visible(){
        document.getElementById("tipo").style.visibility = "visible";
        document.getElementsByName("raca").style.visibility = "visible";
        document.getElementByName("descricao").style.visibility = "visible";
        document.getElementsByName("submit").style.visibility = "visible";
        document.getElementById("login").style.visibility = "hidden";
        document.getElementsById("senha").style.visibility = "hidden";
    }
    </script>
    <form action="cad.php" method="post" name="form">
        <input type="text"  id="tipo" name="tipo" value="" style="visibility: hidden;" >
        <input type="text"  name="raca" value="" style="visibility: hidden;">
        <textarea name="area" style="visibility: hidden;"><input type="text" name="descricao" value=""></textarea>
        <input type="submit" name="submit" value="submit" style="visibility: hidden;">
    </form>
    <script>
    
        function Visible(){
        document.getElementById("tipo").style.visibility = "visible";
        document.getElementsByName("raca").style.visibility = "visible";
        document.getElementByName("descricao").style.visibility = "visible";
        document.getElementsByName("submit").style.visibility = "visible";
        document.getElementByName("usuario").style.visibility = "hidden";
        document.getElementsByName("senha").style.visibility = "hidden";
    }
    </script>
</body>
</html>

2
  • 1
    Recomendo estudar mais um pouco e analisar o código. Tem muita coisa estranha. Um input dentro de um textarea? Dados de Login no Javascript? Por que não oculta/mostra o formulário todo em vez de cada elemento dentro dele? O problema não é que o segundo form está "aparecendo e sumindo rápido", é porque vc está submetendo o primeiro e a página está sendo recarregada.
    – Sam
    20/11/2018 às 20:15
  • realmente tinha muita coisa estranha, muito obrigado eu re-li tudo e concertei tudo =) 20/11/2018 às 20:23

1 Resposta 1

0

Olá, a sua tela 'pisca' porque os elementos se tornam visíveis e então o form é submetido (enviado), então página é recarregada e tudo volta ao estado original.

Para impedir que isso ocorra é necessário fazer com que o evento pare e não envie o formulário. Para isso pode utilizar o método .preventDefault() do evento.

<form onsubmit="return Verifica(this, event)">
    <span> Login:</span><input type="text" value="" name="usuario" id="login" >
    <span> Senha:</span> <input type="password" name="senha" value="" id="senha" >    
    <input type="submit">
</form>
<form action="cad.php" method="post" name="form">
   <input type="text"  id="tipo" name="tipo" value="" style="visibility: hidden;" >
   <input type="text"  name="raca" value="" style="visibility: hidden;">
   <textarea name="area" style="visibility: hidden;"><input type="text" name="descricao" value=""></textarea>
    <input type="submit" name="submit" value="submit" style="visibility: hidden;">
</form>
<script>
    function Verifica(form, event){
        event.preventDefault();
        var user = form.usuario.value;
        var pass = form.senha.value;
        if( user == "1" && pass == "2"){
            alert("Sucesso");
            Visible();
          return false
        }else{
            alert("Falho");
            return false;
        }
    }

    function Visible(){
        document.getElementById("tipo").style.visibility = "visible";
        document.getElementsByName("raca").style.visibility = "visible";
        document.getElementByName("descricao").style.visibility = "visible";
        document.getElementsByName("submit")[0].style.visibility = "visible";
        document.getElementById("login").style.visibility = "hidden";
        document.getElementsById("senha").style.visibility = "hidden"; 
    }
</script>

Tentei modificar o mínimo possível do seu código para que fique mais próximo do seu exemplo.

Na tag form adicionei a invocação do método mais um parâmetro, o event.

Alterei a função Verifica para aceitar o evento como parâmetro e logo da primeira linha da função invoco event.preventDefault() isso evita o envio do formulário ao clicar no botão de submit.

Na sua função Visible alterei a linha para document.getElementsByName("submit")[0].style.visibility. O método getElementsByName retorna um array, assim pego a primeira posição do array para evitar erros.

O código ainda pode ser melhorado, mas já é um começo. Espero ter ajudado com o problema

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .