Как в bootstrap-touchspin вывести рядом число из формы, умноженное на коэффициент?

Question

[lasermedcentre]

Есть крутой инструмент для создания счётчиков (форма ввода для чисел со стрелочками) для Bootstrap - https://github.com/istvan-ujjmeszaros/bootstrap-to...

Напрашивается использовать её в "калькуляторах" (например в корзине). Т.е. введённое в поле число (или изменённое стрелочками, или скролом) необходимо вывести рядом, умноженное на коэффициент.


P.S. либо посоветуйте открытый бесплатный spinner для 3 bootstrap'а с валидацией данных (чтобы нельзя было вводить буквы) и работающий в том числе на мобильных.

Answer 1

[Олег]

Доки
Привяжись к событию touchspin.on.stopspin
примерно так

$('#IDинпута').on('touchspin.on.stopspin', function(){
    var price = $(this).val()*100;
    // дальнейшие действия с получившейся ценой
});

Comments

[lasermedcentre]

Спасибо за отклик! Доку видел, увы, "немного" далёк от JS, поэтому затруднён в средствах.

Вот по умолчанию я делаю, например:

<!-- голова -->
<link href="/dist/jquery.bootstrap-touchspin.css" rel="stylesheet" type="text/css" media="all">
<link href="/dist/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
<!-- голова -->

<!-- тело -->
<div class="content-section-b">
	<div class="container">
		<div class="row">
			<div class="col-xs-6">
				<div class="col-xs-6">
	Название товара - 
				</div>
				<div class="col-xs-4 col-xs-offset-1">
<!-- подстановка спиннера -->
	<input id="demo3" type="text" value="1" name="demo3">
<!-- подстановка спиннера -->
				</div>
				<div class="col-xs-1">
<!-- вывод итоговой цены = количество * коэффициент -->
<span id="price"></span>
<!-- вывод итоговой цены = количество * коэффициент -->
				</div>
			</div>
		</div>
	</div>
</div>
<!-- тело -->

<!-- подвал-->
    <script src="/js/jquery-1.11.0.js"></script>
    <script src="/js/bootstrap.min.js"></script>

<!-- инициация спиннера -->
	<script src="dist/jquery.bootstrap-touchspin.js"></script>
        <script>
            $("input[name='demo3']").TouchSpin({
                postfix: "шт"
            });
    </script>
<!-- инициация спиннера -->
<!-- подвал-->

По идее в подвале мне надо добавить ваш код, но я не понимаю как.

Вариант:

<!-- голова -->
<link href="/dist/jquery.bootstrap-touchspin.css" rel="stylesheet" type="text/css" media="all">
<link href="/dist/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
<!-- голова -->

<!-- тело -->
<div class="content-section-b">
	<div class="container">
		<div class="row">
			<div class="col-xs-6">
				<div class="col-xs-6">
	Название товара - 
				</div>
				<div class="col-xs-4 col-xs-offset-1">
<!-- подстановка спиннера -->
	<input id="demo3" type="text" value="1" name="demo3">
<!-- подстановка спиннера -->
				</div>
				<div class="col-xs-1">
<!-- вывод итоговой цены = количество * коэффициент -->
<span id="price"></span>
<!-- вывод итоговой цены = количество * коэффициент -->
				</div>
			</div>
		</div>
	</div>
</div>
<!-- тело -->

<!-- подвал-->
    <script src="/js/jquery-1.11.0.js"></script>
    <script src="/js/bootstrap.min.js"></script>

        <script>
            $("input[name='demo3']").TouchSpin({
                postfix: "шт"
            });

			
			$('demo3').on('touchspin.on.stopspin', function(){
			var price = $(this).val()*100;
			document.getElementById('price').innerHTML = price;
			});
    </script>
<!-- инициация спиннера -->
<!-- подвал-->

Не работает. Я что-то сильно не понимаю в JS, похоже...

[lasermedcentre]

<script src="dist/jquery.bootstrap-touchspin.js"></script>

Я выше забыл добавить, но не суть.
спиннер работает, а вот вывод его значения нет.

[Олег]

$('#demo3') а не $('demo3') =) ты же Id указываешь=)

[Олег]

$('#demo3').on('touchspin.on.stopspin', function()

[lasermedcentre]

LastDreamer: Супер! А можно понаглеть и ещё вопрос задать?
Дело в том, что событие TouchSpin срабатывает при изменении значения кнопками.
Не обрабатываются 2 сценария:
1) ввод текста с клавиатуры/скрола (причём на странице документации не видно в примере с индикатором события чтобы вообще какое-то событие было на это дело)
2) не выводится значение по-умолчанию

[Олег]

lasermedcentre: Чтобы при изменении с клавы работало, добавь событие change
$('#demo3').on('touchspin.on.stopspin, change', function() { ... });
значение по умолчанию можешь выводить в шаблон сразу