3

Sou novo em desenvolvimento web e uso xampp v5.6.28 fiz uma função javascript que quando carrega a pagina, form1 é visível e o form2 é display:none mas quando clico no botão pra deixar o form1 invisivel e mostrar o form2, mostra o form2 rapido e depois volta o form1. Eu gostaria de saber o que causa isso.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Login</title>
    <link rel="stylesheet" type="text/css" href="estilo.css"/>
    <script type="text/javascript" src="script1.js"></script>      
  </head>
  <body >
    <section id="box">
      <form id="form1">
        <h1>Login</h1>
        <input type="text" placeholder="Username"/>
        <input type="password" placeholder="Password"/>
        <div>
          <button id="btns" onclick="muda1">Signup</button>
          <input type="submit" value="Login"/>
        </div>
      </form>

      <form id="form2" onload="carrega()">
        <h1>Signup</h1>
        <input type="text" placeholder="Name"/>
        <input type="email" placeholder="Email"/>
        <input type="text" placeholder="Username"/>
        <input type="password" placeholder="Password"/>
        <input type="password" placeholder="Confirm Password"/>
        <div>
          <button id="btnl">Back</button>
          <input type="submit" value="Signup"/>
        </div>
      </form>

    </section>
  </body>
</html>

css:

@import url('https://fonts.googleapis.com/css?family=Roboto');

html, body{
  font-family: 'Roboto', sans-serif;
  width:100%;
  height:100%;
  background-image:-webkit-linear-gradient(#5b82c1,#74a6f7);
  margin:0;
  padding:0;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
}

#box{
  display:flex;
  align-items: center;
  flex-flow: column wrap;
  width: 30%;
  background-color:#fff;
  padding:18px;
}

h1{
  color:#5b82c1;
  font-size:2em;
}

form{
  width:90%;
}

form input{
  border:none;
}

form input[type="text"],
form input[type="email"],
form input[type="password"]{
  width:100%;
  height:35px;
  font-size:20px;
  margin-bottom:8%;
  border-bottom: 1px solid #5b82c1;
}

form input[type="submit"]{
  background-color:#5b82c1;
  width:95px;
  height:45px;
  font-size:1.5em;
  color:#fff;
  margin-left:46%;
}

button{
  border:none;
  background-color:#5b82c1;
  width:95px;
  height:45px;
  font-size:1.5em;
  color:#fff;
}

.hiddenclass{
  display:none;
}

.showclass{
  display:block;
}

JAVASCRIPT que tentei:

function carrega(){
  document.getElementById("form2").style.display = 'none';
};

function muda1() {
  document.getElementById("form1").style.display = 'none';
  document.getElementById("form2").style.display = 'block';
};
1

2 Respostas 2

2

Seria isso? Acrescentei na funcão muda1() para que a mesma função faça a alternância dos formularios.

function carrega(){
  document.getElementById("form2").style.display = 'none';
}

function muda1() {
  if(document.getElementById("form2").style.display =="none"){
  document.getElementById("form1").style.display = 'none';
  document.getElementById("form2").style.display = 'block';
    }
  else{
      document.getElementById("form1").style.display = 'block';
  document.getElementById("form2").style.display = 'none';
    }
}
@import url('https://fonts.googleapis.com/css?family=Roboto');

html, body{
  font-family: 'Roboto', sans-serif;
  width:100%;
  height:100%;
  background-image:-webkit-linear-gradient(#5b82c1,#74a6f7);
  margin:0;
  padding:0;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
}

#box{
  display:flex;
  align-items: center;
  flex-flow: column wrap;
  width: 30%;
  background-color:#fff;
  padding:18px;
}

h1{
  color:#5b82c1;
  font-size:2em;
}

form{
  width:90%;
}

form input{
  border:none;
}

form input[type="text"],
form input[type="email"],
form input[type="password"]{
  width:100%;
  height:35px;
  font-size:20px;
  margin-bottom:8%;
  border-bottom: 1px solid #5b82c1;
}

form input[type="submit"]{
  background-color:#5b82c1;
  width:95px;
  height:45px;
  font-size:1.5em;
  color:#fff;
  margin-left:46%;
}

input[type=button]{
  border:none;
  background-color:#5b82c1;
  width:95px;
  height:45px;
  font-size:1.5em;
  color:#fff;
}


.hiddenclass{
  display:none;
}

.showclass{
  display:block;
}
<!DOCTYPE html>
<html>
  <head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="estilo.css"/>
<script type="text/javascript" src="script1.js"></script>      
  </head>
  <body onload="carrega()">
<section id="box">
  <form id="form1">
    <h1>Login</h1>
    <input type="text" placeholder="Username"/>
    <input type="password" placeholder="Password"/>
    <div>
      <input type="button" value="SingUp" id="btns" onclick="muda1();">
      <input type="submit" value="Login"/>
    </div>
  </form>

  <form id="form2" onload="carrega()">
    <h1>Signup</h1>
    <input type="text" placeholder="Name"/>
    <input type="email" placeholder="Email"/>
    <input type="text" placeholder="Username"/>
    <input type="password" placeholder="Password"/>
    <input type="password" placeholder="Confirm Password"/>
    <div>
      <input type="button" id="btnl" onclick="muda1();" value="Back">
      <input type="submit" value="Signup"/>
    </div>
  </form>

</section>
  </body>
</html>

18
  • vc mudo alguma coisa?
    – jaojpaulo
    Commented 10/01/2017 às 21:45
  • Estou editando novamente calma ai
    – LocalHost
    Commented 10/01/2017 às 21:46
  • eu vi que eu esqueci de por o onload no body
    – jaojpaulo
    Commented 10/01/2017 às 21:47
  • Seria isso? Mudei a sua função para utilizar a mesma para desaparecer e aparecer e o seu ` onclick="muda1" `
    – LocalHost
    Commented 10/01/2017 às 21:47
  • 1
    obrigado pela ajuda vlw
    – jaojpaulo
    Commented 10/01/2017 às 21:54
2

Segue trecho de código funcionando. Só executar para conferir.

function carrega(){
  document.getElementById("form2").style.display = 'none';
};

function muda1() {
  document.getElementById("form1").style.display = 'none';
  document.getElementById("form2").style.display = 'block';
};

function muda2() {
  document.getElementById("form1").style.display = 'block';
  document.getElementById("form2").style.display = 'none';
};


(function() {
   
   var btn = document.getElementById("btns");
   var btnBack = document.getElementById("btnl");
  
   btn.addEventListener("click", muda1, false);
   btnBack.addEventListener("click", muda2, false);
  
   carrega();
  
})();
@import url('https://fonts.googleapis.com/css?family=Roboto');

html, body{
  font-family: 'Roboto', sans-serif;
  width:100%;
  height:100%;
  background-image:-webkit-linear-gradient(#5b82c1,#74a6f7);
  margin:0;
  padding:0;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
}

#box{
  display:flex;
  align-items: center;
  flex-flow: column wrap;
  width: 30%;
  background-color:#fff;
  padding:18px;
}

h1{
  color:#5b82c1;
  font-size:2em;
}

form{
  width:90%;
}

form input{
  border:none;
}

form input[type="text"],
form input[type="email"],
form input[type="password"]{
  width:100%;
  height:35px;
  font-size:20px;
  margin-bottom:8%;
  border-bottom: 1px solid #5b82c1;
}

form input[type="submit"]{
  background-color:#5b82c1;
  width:95px;
  height:45px;
  font-size:1.5em;
  color:#fff;
  margin-left:46%;
}

button{
  border:none;
  background-color:#5b82c1;
  width:95px;
  height:45px;
  font-size:1.5em;
  color:#fff;
}

.hiddenclass{
  display:none;
}

.showclass{
  display:block;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Login</title>
    <link rel="stylesheet" type="text/css" href="estilo.css"/>
    <script type="text/javascript" src="script1.js"></script>      
  </head>
  <body >
    <section id="box">
      <form id="form1">
        <h1>Login</h1>
        <input type="text" placeholder="Username"/>
        <input type="password" placeholder="Password"/>
        <div>
          <button id="btns" onclick="muda1">Signup</button>
          <input type="submit" value="Login"/>
        </div>
      </form>

      <form id="form2">
        <h1>Signup</h1>
        <input type="text" placeholder="Name"/>
        <input type="email" placeholder="Email"/>
        <input type="text" placeholder="Username"/>
        <input type="password" placeholder="Password"/>
        <input type="password" placeholder="Confirm Password"/>
        <div>
          <button id="btnl">Back</button>
          <input type="submit" value="Signup"/>
        </div>
      </form>

    </section>
  </body>
</html>

Qualquer dúvida é só postar um comentário.

Espero ter ajudado.

12
  • obrigado pela ajuda
    – jaojpaulo
    Commented 10/01/2017 às 21:52
  • @jaojpaulo, se minha resposta foi útil, seria bom marcar com +1 Commented 10/01/2017 às 21:55
  • executando o código aqui funciona direitinho mas quando rodo no xampp não funciona pq?
    – jaojpaulo
    Commented 10/01/2017 às 22:03
  • acontece o que eu disse na pergunta
    – jaojpaulo
    Commented 10/01/2017 às 22:06
  • Um pouco difícil afirmar o que pode estar acontecendo. Posso acessar remotamente para olhar se quiser... tem teamviewer? Commented 10/01/2017 às 22:08

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 .