Because when I click the button to execute the function of showing an invisible form it shows the form but then it disappears?

Question

Because when I click the button to execute the function of showing an invisible form it shows the form but then it disappears?

Navigation

#1 by (2 votes)
#2 by (2 votes)

3

I'm new to web development and I use xampp v5.6.28 I made a javascript function that when I load the page, form1 is visible and form2 is display: none but when I click the button to leave form1 invisible and show form2, it shows form2 fast and then back to form1. I'd like to know what causes this.

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 I've tried:

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

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

javascript

asked by anonymous 10.01.2017 / 22:28

2 answers

2

Here's some code snippet working. Just run to check.

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>

Any question is just to post a comment.

I hope I have helped.

10.01.2017 / 22:50

Point to a folder before DOCUMENT ROOT? Handle error: "Uncaught TypeError: Can not read property of 'value' undefined"

score 2 · Accepted Answer

Would that be it? I added the muda1() function so that the same function alternates the forms.

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>