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

Asked

Viewed 139 times

3

I am new to web development and use xampp v5.6.28 I made a javascript function that when you load the page, Form1 is visible and form2 is display:None but when I click on the button to make Form1 invisible and show form2, it shows form2 fast and then back to Form1. I’d like to know what causes it.

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

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

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

2 answers

2


Would that be it? I added in function muda1() so that the same function makes the alternation of the formularies. 

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>

  • you change something?

  • I’m editing again calm there

  • I saw that I forgot to put the onload on the body

  • Is that it? I changed its function to use it to disappear and appear and your onclick="muda1"

  • 1

    thanks for the help vlw

  • here the code runs right but in xampp no, it happens the same thing of my question

  • Your code here is exactly de la?

  • yes this the same one here

  • Check the console if there is an error...

  • browser no, but even just running on Chrome without using xampp the problem persists

  • I was able to replicate your error here, Aja edit the answer

  • the page update problem?

  • The problem is I don’t know why, but somehow he was getting the <button> like Ubmit and he was kind of submitting the form. Then I changed the put as <input type="button" and I had to change the css too. And also your form is without the method, this makes the url stay that way

  • then he was updating the page

  • That’s it, but now I’ve fixed it, spin it. I hope I’ve helped :)

  • But thank you from the start

  • how you replicated my mistake?

  • I circled on localhost. It worked?

Show 13 more comments

2

Follow code snippet working. Only 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 questions just post a comment.

I hope I’ve helped.

  • thanks for the help

  • @jaojpaulo, if my answer was helpful, it would be good to score with +1

  • running the code here works well but when I run the xampp does not work pq?

  • happens what I said in the question

  • A little hard to say what may be happening. I can access remotely to look if you want... has teamviewer?

  • I don’t, but what’s weird is I haven’t changed at all

  • Is there anything in the firebug (F12 in Chrome)? error?

  • created new files and with their console code ta giving "Uncaught Typeerror: Cannot read Property 'addeventlistener' of null at script.js:19"

  • and this problem persists even running only on Chrome without using xampp

  • I changed the answer. Just the Javascript part. Tell me if it worked.

  • Tested the changed Javascript?

  • not yet pq I will need to leave but when testing I reply, but since thanks helped mto

Show 7 more comments

Browser other questions tagged javascript

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