jquerybootstrap-tags-input

Count tagsinput and calculate price based on tags


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>

Solution

  • 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)
    });