Navigate to a url when a correct password is entered in an html form using Js

Question

I'm trying to find a way to navigate to a url when a user enters the right password in my form, and display an error alert if they enter the wrong one. I'm a complete newbie to js and used these two links: Password correct? then redirect & Adding an onclick function to go to url in javascript? to put my current code together. My current code is:

                    <form class="hero-form">
                    <fieldset>
                    <div class="row-fluid">
                        <label>Enter your passcode</label>
                        <input type="password" name="password" maxlength="8"      class="span7" id="password" placeholder="e.g. 12345678" required/>
                        <button class="btn btn-info btn-large span5" id="joe_btn" input type="submit" value="Submit" onclick="if (document.getElementById('password').value == '12345678') location.href = 'http://example.url.here'; else alert('Please check your passcode and try again');">Enter</button>

                    </div>    
                    </fieldset>
                </form>

So far I can get it to return an alert if the password is correct, but as soon as I replace:

alert('congrats, correct password')

with this it doesn't work.:

location.href = 'http://your.url.here'

Any help would be grately appreciated. Please post the full code for your response, as I'm an absolute beginner with js and could easily miss something out if you only post snippets.

Thanks heaps,

you are getting to messy by writing all that code in the onclick event you can create a function called 'onSubmit()' and then changing the onclick attribute of the button to onSubmit() — Anay Karnik, Apr 18 '14 at 10:10

Anay Karnik · Accepted Answer · 2014-04-18T11:37:19.527

Your code should be like this:

<script type="text/javascript">
     function onSubmit() {
          if (document.getElementById('password').value == '12345678') {window.location.href = 'http://google.co.in'; }else{ alert('Please check your passcode and try again');}
     }
</script>

<fieldset><form class="hero-form" action="#">
          <div class="row-fluid">
                  <label>Enter your passcode</label>
                  <input type="password" name="password" maxlength="8"      class="span7" id="password" placeholder="e.g. 12345678" required/>

          </div>    
</form></fieldset>
<button class="btn btn-info btn-large span5" id="joe_btn" onclick="onSubmit()">Enter</button>

Your mistake: The button should not submit the form so I have taken it outside the form. And I have updated the location.href to window.location.href

Hope it works.

Just checked it and it works perfectly! Thanks so much Tanay — incredibly appreciated! :) — user2541351, Apr 22 '14 at 02:19
Hey, I gave you the answer, then why are you thanking him. My name is ANAY not TANAY. — Anay Karnik, Apr 23 '14 at 07:46

score 0 · Answer 2 · edited Apr 18 '14 at 10:19

0

window.location.href = 'http://your.url.here';

Note that I put window in front of location.

edited Apr 18 '14 at 10:19

Anay Karnik

920
1
7
15

answered Apr 18 '14 at 03:04

Syl OR

117
1
10

1

he has already put a semicolon after the statement so delete that part of the answer – Anay Karnik Apr 18 '14 at 10:13
1

I go with you we have to put window in front of it. – Anay Karnik Apr 18 '14 at 10:27

score 0 · Answer 3 · answered Apr 18 '14 at 03:12

You set the location.href fine, but the problem is that before the browser has a chance to navigate to that new page, your form gets submitted (because the user clicked on a type="submit" button). Submitting the form causes the browser to begin a new navigation to the form's action, which cancels the navigation you initiated by setting location.href. In your code, the form's action has not been set, so it defaults to the same page you are already on. In effect, the browser will navigate back to the same page, and so it looks like nothing is happening - although you might notice that the content of your form has appeared in the browser's nav bar.

You need to prevent the browser from automatically submitting the form when the button is clicked. One way to do this is to add return false; to the end of your onclick action:

onclick="if (document.getElementById('password').value == '12345678') location.href = 'http://example.url.here'; else alert('Please check your passcode and try again'); return false;"

Navigate to a url when a correct password is entered in an html form using Js

3 Answers3