If Statement Echo Out Different Links For Different Codes

I am using this code HTML:

some message

​ jQuery: $(function() { $('#message').hide(); $('#fail'

Solution 1:

This fiddle does what you might be looking for

<div id="message"><ahref="#">Some link</a></div>
<divid="fail">Invalid postcode</div><inputtype="text"id="myInput" />

$(function () {
    $("#message").hide();
    $("#fail").hide();

    var prefix = ['HX', 'HD', 'BD', 'LS'];
    var links = ['http://www.facebook.com','http://www.example.com','http://www.bbc.com','#'];

    $('#myInput').keyup(function (e) {
        var value = $(this).val();
        var firstTwo = value.substr(0, 2);
        var firstTwoUpper = firstTwo.toUpperCase();

        if (firstTwo != firstTwoUpper) {
            $(this).val(value.replace(/^\w\w/, firstTwoUpper));
        }
        if (value.length > 1) {
            var index = $.inArray(firstTwoUpper, prefix);
            if (index >= 0) {
                $("#fail").hide();
                $("#message").fadeIn();
                $("#message a").attr("href",links[index]).html(links[index])
            } else {
                $("#message").hide();
                $("#fail:hidden").fadeIn();
            }
        } else {
            $("#message").hide();
            $("#fail").hide();
        }
    });
});

Solution 2:

this fiddle: http://jsfiddle.net/um67M/2/

I changed prefix from an array of strings to an array of objects.

You're going to see an issue if users type really fast because of the speed of fadeIn().

$(function() {
$("#message").hide();
$("#fail").hide();

    var prefix = [{code:'HX',link:'www.facebook.com'}, {code:'BD',link:'www.bbc.com'}];

$('#myInput').keyup(function(e) {
    var value = $(this).val();
    var firstTwo = value.substr(0,2);
    var firstTwoUpper = firstTwo.toUpperCase();

    if(firstTwo != firstTwoUpper) {
        $(this).val( value.replace(/^\w\w/, firstTwoUpper) );
    }
    if(value.length > 1) {
        for(var obj in prefix){
            console.log(firstTwoUpper, prefix[obj].code, firstTwoUpper == prefix[obj].code);
            if(firstTwoUpper === prefix[obj].code){
                 $("#fail").hide();
                var link = '<a href="'+prefix[obj].link+'">'+prefix[obj].link+'</a>';
                $("#message").append(link);
                $("#message:hidden").fadeIn();
                break;
            }else {
                $("#message").hide();
                $("#fail:hidden").fadeIn();
            }
        };
    } else {
        $("#message").empty();
        $("#message").hide();
        $("#fail").hide();
    }
 });
});

Solution 3:

$('#myInput').keyup(function (e) {
        var value = $(this).val();
        var firstTwo = value.substr(0, 2);
        var firstTwoUpper = firstTwo.toUpperCase();

        if (firstTwo != firstTwoUpper) {
            $(this).val(value.replace(/^\w\w/, firstTwoUpper));
        }
        if (value.length > 1) {
            if ($.inArray(firstTwoUpper, prefix) >= 0) {
                if (firstTwoUpper == "HX") {
                    $("#message").empty();
                    $("#message").html('<p>some message</p><a href="http://www.google.com">Google</a>');
                } elseif (firstTwoUpper == "HD") {

                    $("#message").empty();
                    $("#message").html('<p>other message</p><a `enter code here`href="http://www.stackoverflow.com">Stack OverFlow</a>');
                }
                $("#fail").hide();
                $("#message:hidden").fadeIn();
            } else {
                $("#message").hide();
                $("#fail:hidden").fadeIn();
            }
        } else {
            $("#message").hide();
            $("#fail").hide();
        }
    });

the fiddle is here fiddle