Set total input equal quantity * price value

I want to when user chose a product and enter the quantity the total input = quantity * price using jquery

HTML

    <div id='sample'>

<div class="col-sm-3 nopadding">
  <div class="form-group">
    <select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_product[]">
      <option data-price=200 value=1>tes1</option>
      <option data-price=218 value=2>tes2</option>
      <option data-price=80 value=3>tes3</option>
    </select>
  </div>
</div>
<div class="col-sm-3 nopadding">
  <div class="form-group">
    <input type="text" class="form-control" name="qty[]" value="" placeholder="Quantity">
  </div>
</div>
<div class="col-sm-3 nopadding">
  <div class="form-group">
    <input type="text" class="form-control price" name="price[]" value="" placeholder="Price">
  </div>
</div>
<div class="col-sm-3 nopadding">
  <div class="form-group">
    <input type="text" class="form-control " name="total[]" value="" placeholder="total">
  </div>
</div>
<button class='generate'>
  Generate New Form
</button>

</div><!-- .sample -->

Jquery

    var sample = $('#sample').html();
function set_price( slc ) {
    var price = slc.find(':selected').attr('data-price');
    slc.parent().parent().next().next().find('.price').val(price)
}

$('#sample').on('click','.generate',function(){
    $('#sample').append(sample);
})

$('#sample').on('change','select.selectpicker',function(){
    set_price( $(this) );
})

check it live here from here -> https://jsfiddle.net/qxn0L6jv/12/

3 answers

  • answered 2017-06-17 18:26 Alive to Die--Anant singh

    Do it like below (Add this snippet in your jQuery code):-

    $(document).on('mouseout','.price',function(){
      var quantity 	= $(this).parent().parent().prev().find('input[type="text"]').val();
      var price 	= $(this).val();
      if(quantity !=='' && price !==''){
        $(this).parent().parent().next().find('input[type="text"]').val(parseInt(quantity) * parseInt(price));
      }
    });
    
    $(document).on('mouseout','input[placeholder="Quantity"]',function(){
      var price 	= $(this).parent().parent().next().find('input[type="text"]').val();
      var quantity 	= $(this).val();
      if(quantity !=='' && price !==''){
        $(this).parent().parent().next().next().find('input[type="text"]').val(parseInt(quantity) * parseInt(price));
      }
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id='sample'>
    
    <div class="col-sm-3 nopadding">
      <div class="form-group">
        <select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_product[]">
          <option data-price=200 value=1>tes1</option>
          <option data-price=218 value=2>tes2</option>
          <option data-price=80 value=3>tes3</option>
        </select>
      </div>
    </div>
    <div class="col-sm-3 nopadding">
      <div class="form-group">
        <input type="text" class="form-control" name="qty[]" value="" placeholder="Quantity">
      </div>
    </div>
    <div class="col-sm-3 nopadding">
      <div class="form-group">
        <input type="text" class="form-control price" name="price[]" value="" placeholder="Price">
      </div>
    </div>
    <div class="col-sm-3 nopadding">
      <div class="form-group">
        <input type="text" class="form-control " name="total[]" value="" placeholder="total">
      </div>
    </div>
    <button class='generate'>
      Generate New Form
    </button>
    
    </div><!-- .sample -->

    Note:- Above code will work for each newly added form too.

  • answered 2017-06-17 18:26 Sagar V

    add an event listener to input and check if all the inputs are filled or not. If it is filled, calculate the total and set it to total.

    The code for that looks like

    $('input').on('change',function(){
        if(parseInt($('input[name=price]').val())>0 && parseInt($('input[name=qty]').val())>0)  $('input[name=total]').val(parseInt($('input[name=price]').val())*parseInt($('input[name=qty]').val()));
    });
    

    And the full snippet be like

    var sample = $('#sample').html();
    
    function set_price(slc) {
      var price = slc.find(':selected').attr('data-price');
      slc.parent().parent().next().next().find('.price').val(price)
    }
    
    $('#sample').on('click', '.generate', function() {
      $('#sample').append(sample);
    })
    
    $('#sample').on('change', 'select.selectpicker', function() {
      set_price($(this));
    })
    $('input').on('change', function() {
      if (parseInt($('input[name=price]').val()) > 0 && parseInt($('input[name=qty]').val()) > 0) $('input[name=total]').val(parseInt($('input[name=price]').val()) * parseInt($('input[name=qty]').val()));
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <div id='sample'>
    
      <div class="col-sm-3 nopadding">
        <div class="form-group">
          <select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_product[]">
          <option data-price=200 value=1>tes1</option>
          <option data-price=218 value=2>tes2</option>
          <option data-price=80 value=3>tes3</option>
        </select>
        </div>
      </div>
      <div class="col-sm-3 nopadding">
        <div class="form-group">
          <input type="text" class="form-control" name="qty" value="" placeholder="Quantity">
        </div>
      </div>
      <div class="col-sm-3 nopadding">
        <div class="form-group">
          <input type="text" class="form-control price" name="price" value="" placeholder="Price">
        </div>
      </div>
      <div class="col-sm-3 nopadding">
        <div class="form-group">
          <input type="text" class="form-control " name="total" value="" placeholder="total">
        </div>
      </div>
      <button class='generate'>
      Generate New Form
    </button>
    
    </div>
    <!-- .sample -->

  • answered 2017-06-17 18:26 Whogives Ashit

    I hope THIS is what you want because the code really pissed me off as you can see from the variables' names :D This is the page's source:

    <script type="text/javascript" language="javascript" src="jquery.min.js"></script>
    
    <div id="sample">
    <div id="son_of_a_bitch">
    <div class="col-sm-3 nopadding">
    <div class="form-group">
    <select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_product[]">
      <option class="options" data-price=200 value="200">tes1</option>
      <option class="options" data-price=218 value="218">tes2</option>
      <option class="options" data-price=80 value="80">tes3</option>
    </select>
    </div>
    </div>
    <div class="col-sm-3 nopadding">
    <div class="form-group">
    <input type="text" class="form-control" name="qty[]" value="" placeholder="Quantity" id="amount_of_shit">
    </div>
    </div>
    <div class="col-sm-3 nopadding">
    <div class="form-group">
    <input type="text" class="form-control price" name="price[]" value="" placeholder="Price" id="the_shits_price">
    </div>
    </div>
    <div class="col-sm-3 nopadding">
    <div class="form-group">
    <input type="text" class="form-control " name="total[]" value="" placeholder="total" id="cost_of_all_shit">
    </div>
    </div>
    </div>
    </div><!-- .sample -->
    <button class='generate'>
    Generate New Form
    </button>
    
    <script type="text/javascript">
    var sample = $('#sample').html();
    
    $(document).on('click','.generate',function(){
    $('#sample').append(sample);
    })
    
    $(document).on('change','select.selectpicker',function(event){
    event.preventDefault(); 
    var amount = $( this ).closest('#son_of_a_bitch').find("#amount_of_shit").val();
    var price = $( this ).closest("#son_of_a_bitch").find(".options:selected").val();
    var total = amount * price;   
    
    var add_price = $( this ).closest("#son_of_a_bitch").find("#the_shits_price").val(price);
    var add_cost_of_all_shit = $(this).closest("#son_of_a_bitch").find("#cost_of_all_shit").val(total);
    })
    </script>