1

I'm fairly new to JavaScript/jQuery and web programming. I have to textboxes and a button. I'm trying to make it so that when the textboxes have the right characters in them and you click the button, it takes you to another page. But when I click the button, nothing happens.

Here is a link to it on my server: http://jakadproductions.com/testing/

Sorry, I'm only 15.

My code:

$document.ready(function() {
  $("#login_button").click(function() {
    var username_value = document.getElementById("username_box").value;
    var password_value = document.getElementById("password_box").value;
    if (username_value == "JakobMorelan" && password_value == "Admin1234") {
      window.location = "http://jakadproductions.com/naj7m6j2aajre1o7opjr/";
    };
    else {
      window.location = "http://jakadproductions.com/";
    };
  });
});
<title>LOGIN</title>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>

<h1>LOGIN</h1>
<input id="username_box" type="textbox" placeholder="Username" />
<input id="password_box" type="textbox" placeholder="Password" />
<button id="login_button">Submit</button>

Improve this question
6
  • take the ;'s off of the closing brackets in your if condition. Your browser should have a developer console where you will see syntax errors like that. Commented May 1, 2017 at 17:21
  • Please confirm, you are writing this as an exercise for yourself and not to really hide anything valuable behind a javascript link obfuscator. Commented May 1, 2017 at 17:22
  • To clarify my comment above. Everyone can read your javascript code. Thus anyone can very easily bypass this "login" mechanism. Commented May 1, 2017 at 17:24
  • 1
    @wedi I'm really new to it it, so I'm just playing around. If I were to build an actual login, it would be server side instead. Commented May 1, 2017 at 17:27
  • Follow Michael Coker comment, your java script has syntax errors Commented May 1, 2017 at 18:08

6 Answers 6

Reset to default
1

The console is your friend. Looking at it would reveal this:

SyntaxError: expected expression, got keyword 'else'

Given you only have one else keyword in your code, you can assume it's that one. Immediately before that you have a semicolon which completely ends that conditional. Therefore the else is invalid because there's no longer an if that it's continuing from. Remove the semicolon and it will run.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Remove extra semi-colon after if 

if (username_value == "JakobMorelan" && password_value == "Admin1234") {
                window.location = "http://jakadproductions.com/naj7m6j2aajre1o7opjr/";
            }
            else {
                window.location = "http://jakadproductions.com/";
            };
Improve this answer

Comments

0

Your if/else block has an additional ; where none is expected!

Try and open the developer tools of your browser, it should give you a hint if there is something wrong with your code and a pointer to where the error is.

In this case remove the ; after the if statement

Improve this answer

Comments

0

The browser debugger is a great tool to figure out these issues. When I opened the link to your testing page and opened the browser's debug tool it spit out the problem:

Uncaught SyntaxError: Unexpected token else

It's saying that it doesn't expect the else token because you put a semi colon after the if clause ending it. Since there was no if statement that was still ongoing the else was unexpected and the script crashed

Improve this answer

Comments

0

First of all, there is an error in the code. After your if statement (and before the else) you have put a semicolon ';'. First fix that, CTRL + SHIFT + J opens a console on Chrome, you can use to debug this kind of errors easily

Improve this answer

Comments

0

You appear to have two errors in your code—

  1. As others have mentioned, you have to remove the semicolon after your if {...} block. In JavaScript and many other languages, the standard syntax is if {...} else {...}.

  2. Your jQuery code begins with $document, where—unless var $document has been previously defined—you really need $(document). The document variable is globally available and doesn't itself need to be defined, but to use it with jQuery methods like .ready(...), you have to wrap it in the jQuery wrapper, which is what $(document) does.

Here's a Codepen example of it working. I have changed the redirects to alerts.

https://codepen.io/ericpedia/pen/qmmvNJ

Improve this answer

2 Comments

I do have one more question though. I can't get the browser to redirect to a different page when the button is clicked. Not sure why. Do you know possibly? @supertrue
If you mean it doesn't redirect in the Codepen example, that's because the redirect fails in the Codepen context due to security/iframe considerations. If that's not what you mean, you may need to prevent the default form submission behavior (which is often to load another page) inside your .click function. To do this, pass in the event variable, like this: .click(function(event)... and add event.preventDefault(); to the beginning of the function. Let me know if it works.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.