Question

Haven’t been coding in a bit, but took on a project for a friend. Basically, I need a 1 input form that checks for a 4 digit code. If the code is correct (is one of the 2 or 3 possible correct codes), it proceeds to a new page, if it’s not it doesn’t submit, and displays an error. It doesn’t have to be very pretty. Looking for a jquery solution, and any push in the right direction would be appreciated. I’m very rusty.

<form name="codeForm" action="" method="get">
     <input name="yourCode" type="text" id="yourCode"/>
    <input name="submit" type="submit" value="Go" id="code_input_submit" />

    <div id="message"><p></p>
     </div><!--end message-->

</form>

<div id="btn"></div>

and my jquery is along the lines of the following:

$(document).ready(function () {
var code1 = "7816";
var code2 = "1226";

$('#btn').click(function() {
var value = $('#yourCode').val();

    if (value == code1){                                             // go to site 'abc.com/'code1;
    }
      else if (value == code2){                                         //go to site 'abc.com/'code2;
    }
    else{                                      $('#message').html('your code is wrong');
    }
});

});

Answer 1

If this is what it seams to be, a validation requirement and you’re actually thinking of storing the data client side: No, no, no!

Your “entry-pins” will be in plain sight of every single user trying to log on.

You should always authenticate server side.

1. store the keys on server (database or file, whatever suits you)
2. client makes a request to server via post
3. Server accepts or denies client request

For example, submit the form to the server-side page authenticate.php

And PHP file will check if user is good to go or not.

<?php
// very simple and not really secure server-side auth script
$codes = {1234, 5678, 9012};
$valid_user = false; // all users are invalid until otherwise

$user_inserted_code = (int) $_POST['key'];
if(in_array($user_inserted_code, $codes)) {
    $valid_user = true;
}

if($valid_user==true)
     header("Location: http://example.com/authenticated");
else
     header("Location: http://example.com/failled_auth");
?>

If you really don’t need security and the codes you’re refering to are static and something in the likes of (ie) department codes… growing on your example you can just use a simple switch:

$(document).ready(function () {
    var code1 = "7816";
    var code2 = "1226";

    $('#btn').click(function() {
        var value = $('#yourCode').val();

        switch(value) {
            case 7816: window.location = "http://google.com/"; break;
            case 1226: window.location = "http://yahoo.com"; break;
            default: $('#message').html('your code is wrong');
        }
    });
});