I have the following script in which I do not know how to add a calculation system based on multiple tags, eg: if I add one tag in compnr input i want to be displayed the price of 100e in totalpay input and if I add more than one tag its price to be 70e per tag and to show me the total price of all tags in totalpay input. (Im new with this and i don't know how to manage the bootstrap-tags-input and Sorry for my bad english.
Html Form:
<form action="" id="orderform" method='post'>
<div class="form-wrapper">
<label for="">Comp.Nr:</label>
<input data-role="tagsinput" id="compnr" required type="text" name="compnr" class="form-control" placeholder="(with comma: ex: 443, 331)">
</div>
<div class="form-wrapper last">
<label for="" class="label-input">Total to Pay:</label>
<input type="text" name="totalpay" id="totalpay" class="form-control">
</div>
</form>
Jquery:
<script type="text/javascript">
setInterval(function(){
$(function() {
var total = $('#compnr').tagsinput('items');
var tagsInputLength = total.length;
var total_single ="";
var total_multiple ="";
switch(tagsInputLength) {
case 1:
price = 100;
total_single = (tagsInputLength * price);
$('#totalpay').val(total_single);
break;
case ((tagsInputLength>=0 && tagsInputLength<=100)?tagsInputLength:-1):
price = 70;
total_multiple = (tagsInputLength * price);
$('#totalpay').val(total_multiple+' EURO');
break;
}
});
}, 1000);
</script>
you can try like this Jquery:
$('#compnr').on('change', function(){
var items = $("#compnr").tagsinput('items').length;
price = ''
if (items == 1){
price = 100;
}else{
price = parseInt(items)*70;
}
$('#totalpay').val(price)
});