visible hidden no form in javascript

-4

I want when I enter the login, the other form appears but it appears for a second frame and disappears, why ?? Anybody help me please?

<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>
    
asked by anonymous 20.11.2018 / 21:02

1 answer

0

Hello, your screen 'blinks' because the elements become visible and then form is submitted (submitted), then page is reloaded and everything returns to the original state.

To prevent this from happening, you must stop the event and do not send the form. For this you can use the .preventDefault() method of the event.

<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>

I tried to modify as little of your code as possible so that it gets closer to your example.

In the form tag I added the invocation of the method plus one parameter, event .

I changed the Verifica function to accept the event as a parameter and soon after the first line of the invoc function event.preventDefault() this prevents sending the form by clicking on the submit button.

In your function Visible I changed the line to document.getElementsByName("submit")[0].style.visibility . The getElementsByName method returns an array, so I get the first array position to avoid errors.

The code can still be improved, but it's a start. I hope I have helped with the problem.

    
25.11.2018 / 00:00