Visible Hidden no form no javascript

Asked

Viewed 71 times

-4

I want when you log in, the other form appears but it appears by a second frame and disappears, why ?? someone please help me ?

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

javascript
  • 1

    I recommend studying some more and analyzing the code. There is a lot of strange stuff. An input within a textarea? Login data in Javascript? Why not hide/show the whole form instead of each element within it? The problem is not that the second form is "appearing and disappearing fast", it is because you are submitting the first and the page is being reloaded.

  • really had a lot of weird stuff, thank you so much I re-read everything and fixed everything =)

1 answer

0


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

To prevent this from happening it is necessary to stop the event and do not send the form. For this you can use the method .preventDefault() 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 to get closer to your example.

Tag form added the method invocation plus a parameter, the event.

I changed the function Verifica to accept the event as a parameter and from the first line of the function event.preventDefault() this avoids sending the form by clicking the Submit button.

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

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

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.