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

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

Solution 2:

you can use

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

that will redirect the page

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

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