I am trying to align two buttons vertically under an input text box with the middle aligned. This is what I have done so far:
jQuery(document).ready(function($) {
// Implementing bootstrap minus and plus plugin
// Reference: http://jsfiddle.net/laelitenetwork/puJ6G/
// Button click event handling
$('.btn-number').click(function(e) {
e.preventDefault();
fieldName = $(this).attr('data-field');
type = $(this).attr('data-type');
var input = $("input[name='" + fieldName + "']");
var currentVal = parseFloat(input.val());
if (!isNaN(currentVal)) {
if (type == 'minus') {
if (currentVal > input.attr('min')) {
input.val(currentVal - 0.5).change();
}
if (parseFloat(input.val()) == input.attr('min')) {
$(this).attr('disabled', true);
}
} else if (type == 'plus') {
if (currentVal < input.attr('max')) {
input.val(currentVal + 0.5).change();
}
if (parseFloat(input.val()) == input.attr('max')) {
$(this).attr('disabled', true);
}
}
} else {
input.val(0);
}
});
// Input focus event handling
$('.input-number').focusin(function() {
$(this).data('oldValue', $(this).val());
});
// Input change event handling
$('.input-number').change(function() {
minValue = parseFloat($(this).attr('min'));
maxValue = parseFloat($(this).attr('max'));
valueCurrent = parseFloat($(this).val());
name = $(this).attr('name');
if (valueCurrent >= minValue) {
$(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled')
} else {
alert('Sorry, the minimum value was reached');
$(this).val($(this).data('oldValue'));
}
if (valueCurrent <= maxValue) {
$(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled')
} else {
alert('Sorry, the maximum value was reached');
$(this).val($(this).data('oldValue'));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
<div class="input-group">
<input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
<ul class="input-group-btn">
<li><button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
<span class="glyphicon glyphicon-minus">-</span>
</button></li>
<li><button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">
<span class="glyphicon glyphicon-plus">+</span>
</button></li>
</ul>
</div>
</div>The code works fine, but I am facing challenges in positioning the elements.