JavaScript simple redirect after password is entered

Question

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>

please post your code. the ajax code that checks the password, not the html form. — I wrestled a bear once., Feb 29 '16 at 21:32
Check this topic: http://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission — Amino, Feb 29 '16 at 21:35

score 3 · Accepted Answer · edited Feb 29 '16 at 21:52

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>

This still redirects if you get the password wrong can this be stopped? — Jonny Jordan, Feb 29 '16 at 21:45

score 0 · Answer 2 · answered Feb 29 '16 at 21:36

0

you can use

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

that will redirect the page

answered Feb 29 '16 at 21:36

SBoys3.com

424
3
12

score 0 · Answer 3 · answered Feb 29 '16 at 21:37

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.

Amino · Answer 4 · 2016-02-29T21:52:47.957

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>

This doesn't seem to redirect when you get the password right — Jonny Jordan, Feb 29 '16 at 21:47
if(document.getElementById('password').value == 'hello'){ alert('Correct Password!'); location.href="http://google.com" } I think jsfiddle block the redirection. it should work! — Amino, Feb 29 '16 at 21:48

JavaScript simple redirect after password is entered

4 Answers4

Linked