Numeric updown control using jquery

by Nikhil Mangal

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<a class="minus" href="#">-</a><input type="text" /><a class="plus" href="#">+</a>

SASS

#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");
		}
	});
});