JavaScript simple redirect after password is entered

问题

I just want to click a button, then, if you get the password right, it should redirect you to a different page, but if you get wrong, it should do nothing.

The following code below works, but it redirects you to the success page if you get it wrong as well. I just want it to redirect only if you get it right.

   <div class="wrapper">
    <form class="form1" action="http://google.com">
        <div class="formtitle">
            Enter the password to proceed
        </div>

        <div class="input nobottomborder">
            <div class="inputtext">
                Password:
            </div>

            <div class="inputcontent">
                <input type="password" id="password" /><br />
            </div>
        </div>

        <div class="buttons">
            <input class="orangebutton" type="submit" value="Login" onclick="if (document.getElementById('password').value == 'hello') alert('Correct Password!'); else alert('Wrong Password!');" />
        </div>
    </form>
</div>

回答1:

You have to add return false when password is not same. this prevents default action and event propagation. you can also use jquery to get element and their values, if you have that option.

this depends on how you want to handle on server side or only on client side. for only on client side we can change type="submit" to type="button".

        <div class="wrapper">
            <form class="form1" action="http://google.com">
                <div class="formtitle">
                    Enter the password to proceed
                </div>

                <div class="input nobottomborder">
                    <div class="inputtext">
                        Password:
                    </div>

                    <div class="inputcontent">
                        <input type="password" id="password" /><br />
                    </div>
                </div>

                <div class="buttons">
                    <input class="orangebutton" type="button" value="Login" onclick="checkPassword()" />
                </div>
            </form>
        </div>

       <script>
      function checkPassword(){
       if(document.getElementById('password').value == 'hello'){
        alert('Correct Password!'); 
          location.href = "http://google.com";
         } else {
         alert('Wrong Password!');
          return false;
        }
       }
      </script>

回答2:

you can use

location.href="http://google.com"

that will redirect the page

回答3:

This should be done with an onclick function, not an if statement inline. Bad programming practice, and would be a lot easier to view and manipulate if coded properly.

<input class="orangebutton" type="submit" value="Login" onclick="if (document.getElementById('password').value == 'hello') alert('Correct Password!'); else alert('Wrong Password!');" />

changed to

<input class="orangebutton" type="submit" value="Login" onclick="passCheck()" />

with a passCheck() function is how it should be done.

回答4:

The main issue is that form submitting since it is a form, you need to disable this submission first, and then validate form.

check this: https://jsfiddle.net/sg8pw2vL/1/

 <div class="wrapper">
        <form method="POST" class="form1" onsubmit="return checkPassword();  return false;">
            <div class="formtitle">
                Enter the password to proceed
            </div>

            <div class="input nobottomborder">
                <div class="inputtext">
                    Password:
                </div>

                <div class="inputcontent">
                    <input type="password" id="password" /><br />
                </div>
            </div>

            <div class="buttons">
                <input class="orangebutton" type="submit" value="Login"  />
            </div>
        </form>
    </div>

   <script>
  function checkPassword(){
   if(document.getElementById('password').value == 'hello'){
    alert('Correct Password!'); 
    location.href="http://google.com";
     } else {
     alert('Wrong Password!');
      return false;
    }
   }
  </script>

来源：https://stackoverflow.com/questions/35710019/javascript-simple-redirect-after-password-is-entered

标签

javascript

html

redirect

passwords