Enter a certain number of URL's

by alano

HTML

<fieldset class="urls">
    <legend>Please enter some URL's:-</legend>
    <ul></ul>
    <input type="url" placeholder="Add a URL here" />
    <button>add</button>
</fieldset>

CSS

.urls span {
    text-decoration:underline;
    cursor:pointer;
    color:Green;
    margin-left:10px;
}

JavaScript

var MAXROWS = 5;
$(document).ready(function(){
    var $urls = $(".urls ul"); //cache list for performance
    var $url = $(".urls input");
    var $add = $(".urls button");
    $add.click(function(){
        if ($url.val()) {
            //input box is not empty                
            var url = $url.val();
            $urls.append($("<li>").append($("<a>", { href: url, text: url })).append($("<span>remove</span>"))); //add listing
            $url.val("").focus(); //clear entry box set focus
            if ($("li", $urls).length >= MAXROWS) disableInput();
        }
    });
    $urls.on("click", "span", function(){
        $(this).closest("li").remove();
        enableInput();
    });

function disableInput(){
    $add.add($url).prop("disabled", true).attr("title", "You have reached the maximum limit"); //diable add button and input
}

function enableInput(){
$add.add($url).prop("disabled", false).attr("title", ""); //reenable add button and input
}

});