CODEWITHSUNDEEP
javascripthtmlhttp-redirectauthenticationpasswords
Jonny Jordan
Jonny Jordan

Reputation: 405

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>

Upvotes: 0

Views: 12901

Answers (4)

Mira
Mira

Reputation: 563

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>

Upvotes: 0

Kalyan
Kalyan

Reputation: 316

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>

Upvotes: 3

Z. Dailey
Z. Dailey

Reputation: 131

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.

Upvotes: 0

SBoys3.com
SBoys3.com

Reputation: 424

you can use

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

that will redirect the page

Upvotes: 0

Related Questions