How to check a textbox and redirect to an URL with Javascript?

Question

i'm trying to make a 'password protected' page for the pages that I build for customers, so that they can check the progress of their page, but it won't be available for people who don't have a code.

I've been trying a few hours now but i can't seem to get it working. I can get a popup screen now with a place with the login code, but I can't make it redirect to another page.

Here's my code:

$(document).ready(function() {
  $('.accesbutton').click(function() {
    $('.login').fadeIn('fast');
    $('.opening').fadeTo('fast', 0.2);
  });

  var $code = $('.logincode').val();
  var $check = 'DDT4DHFD';
  $('.submit').click(function() {
    if ($code === $check) {
      window.location = 'homepage.html';
    } else {
      $('.logincode').animate({
        color: 'red'
      });
    }
  });
});

.login {
  background-color: #FFFFFF;
  position: absolute;
  margin: auto;
  padding: 0 1em;
  left: 35%;
  top: 10em;
  width: 30%;
  height: auto;
  z-index: 1000;
  display: none;
}
.accesbutton {
  background-color: #FF3333;
  width: 10em;
  height: 3em;
  line-height: 3em;
  margin: 2em auto;
  border-radius: 25px;
  text-align: center;
}
.text {
  color: #ffffff;
  text-align: center;
  font-family: "Open Sans";
  font-size: 1.2em;
}

<body>
  <html>
  <div class="accesbutton">
    <p class="text">Bekijk website</p>
  </div>
  <div class="login">
    <p class="text" style="color:#000000">Je kunt hier inloggen met een toeganscode.
      <br>
      <br>Heb je geen toegangscode? Neem dan contact op met The Design Company of je Beheerder.
      <br>
    </p>
    <p class="text" style="color:#000000">
      <label for="usermail">Toegangscode:</label>
      <input type="text" name="usercode" placeholder="XXXXXXXX" class="logincode" required>
      <input type="submit" value="Login" class="submit">
    </p>
  </div>
</body>
</html>

Some of the text is in dutch, including the button.

The first part opens the pop up screen, and the second part should redirect to the page when the code is correct.

What am I doing wrong?

-Johr Claessens

be aware: client-side (i.e., implemented in javascript) authentication like this is very trivially bypassed. — Woodrow Barlow
– Woodrow Barlow, Commented May 30, 2016 at 18:05
The websites that I work on right now aren't really that big of a deal if they get bypassed. It's only to keep the most people away who already check the website when it isn't officialy launched. But good to know, i'll keep that in mind ;) — johr claessens
– johr claessens, Commented May 30, 2016 at 18:13
Change the submit to type="button" and move var $check=$.... Inside the click function — mplungjan
– mplungjan, Commented May 30, 2016 at 18:14

gaetanoM · Accepted Answer · 2016-05-30 20:36:35Z

1

UPDATE:

For security issues you may use get or post using as data parameter $('.logincode').val(). On server side (using your current language like C#, javascript, PHP, ... I don't know which one you currently use) you can compare the values and return to the client side only a value: true or false. As example you may write something like:

$.get("checklogin.php", { val: $('.logincode').val() } )
 .done(function(data) {})
 .fail(function() {});

OLD ANSWER:

The typo in your code is:

var $code = $('.logincode').val();

This is declared outside the event handler.

I may suggest you to save the value of the variable $check on the server side, this is a little an simple trick, in order to avoid to have such a variable visible on the client side:

$(function () {
  $('.accesbutton').click(function() {
    $('.login').fadeIn('fast');
    $('.opening').fadeTo('fast', 0.2);
  });


  var $check = 'DDT4DHFD'; // put this variable in a text (or json) file on server side
  $('.submit').click(function(e) {
    var $code = $('.logincode').val();  // this is your typo
    
    
    // you may use this to get and test value from your server
    // I figured out checklogin as a text server side file
    /***************************
    $('.submit').prop('disabled', true);
    $.get('checklogin', function( data ) {
      if (data.trim() == $check) {
        window.location = 'homepage.html';
      } else {
        $('.logincode').animate({
          color: 'red'
        });
      }
      $(this).removeProp('disabled');
    }).fail(function() {
      console.log('Failed');
      $('.submit').removeProp('disabled');
    });
    ****************************/
    // Till here.........................
    
    
    // or like you are doing.....
    if ($code === $check) {
      window.location = 'homepage.html';
    } else {
      $('.logincode').animate({
        color: 'red'
      });
    }
  });
});

.login {
  background-color: #FFFFFF;
  position: absolute;
  margin: auto;
  padding: 0 1em;
  left: 35%;
  top: 10em;
  width: 30%;
  height: auto;
  z-index: 1000;
  display: none;
}
.accesbutton {
  background-color: #FF3333;
  width: 10em;
  height: 3em;
  line-height: 3em;
  margin: 2em auto;
  border-radius: 25px;
  text-align: center;
}
.text {
  color: #ffffff;
  text-align: center;
  font-family: "Open Sans";
  font-size: 1.2em;
}

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="accesbutton">
    <p class="text">Bekijk website</p>
</div>
<div class="login">
    <p class="text" style="color:#000000">Je kunt hier inloggen met een toeganscode.
        <br>
        <br>Heb je geen toegangscode? Neem dan contact op met The Design Company of je Beheerder.
        <br>
    </p>
    <p class="text" style="color:#000000">
        <label for="usermail">Toegangscode:</label>
        <input type="text" name="usercode" placeholder="XXXXXXXX" class="logincode" required>
        <input type="submit" value="Login" class="submit">
    </p>
</div>

edited May 30, 2016 at 20:36

answered May 30, 2016 at 18:30

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

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

3 Comments

johr claessens Over a year ago

Thanks! It worked. I'm going to try the Server sided method later this week. Thanks for the help!

Woodrow Barlow Over a year ago

@johrclaessens fyi, putting the passphrase on a file on the server still won't provide any security. anyone can view the javascript code that opens the file, take note of what file is being opened, and simply open the file themselves and read the contents. or they can open the developer tools and change the string comparison to say if (1 === 1) to bypass the check entirely.

edhurtig Over a year ago

The passphrase in JS issue was already addressed in the comments on the question itself above

Collectives™ on Stack Overflow

How to check a textbox and redirect to an URL with Javascript?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related