Numeric updown control using jquery

by Nikhil Mangal

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div id="numericcontrol">
<a class="minus" href="#">-</a><input type="text" /><a class="plus" href="#">+</a>
</div>

CSS

#numericcontrol a
{
	cursor:pointer;
	background:#1dac2e;
	height:25px;
	display:inline-block;
	margin:0px;
	padding:0px 10px;
	float:left;
	line-height:25px;
	font-size:16px;
	color:#fff;
	text-decoration:none;
}
#numericcontrol input[type="text"]
{
	border:solid 1px #1dac2e;
	height:21px;
	float:left;
	width:50px;
	padding:1px 5px;
}

JavaScript

$(document).ready(function(e) {
    $('#numericcontrol input[type="text"]').val("1");
	$val=$('#numericcontrol input[type="text"]').val();
	$('#numericcontrol a.plus').click(function(){
		$val++;
		$(this).parent('div#numericcontrol').find('input[type="text"]').val($val);
	});
	$('#numericcontrol a.minus').click(function(){
		
		if($val>1)
		{
		$val--;	
		$(this).parent('div#numericcontrol').find('input[type="text"]').val($val);
		}
		else
		{
			alert("Value can't be less then 0");
		}
	});
});