CODEWITHSUNDEEP
javascriptjquery
Pavel
Pavel

Reputation: 1974

Javascript: dynamic calculation input value

I have a simple jquery calculator:

   <p class="price" data-base-price="50">$<span>80</span></p>

    <select name="s1" class="price-option">
        <option value="1" data-price="10">Item 1</option>
        <option value="2" data-price="20">Item 2</option>
    </select>

    <select name="s2" class="price-option">
        <option value="1" data-price="30">Item 3</option>
        <option value="2" data-price="40">Item 4</option>
    </select>

    <input type="text" name="price-option-input" id="price-option-input">

Javascript:

$(document).ready(function () {
  $('.price-option').change(function(){
    var price = parseInt($('.price').data('base-price'));

    $('.price-option').each(function(i, el) {
      price += parseInt($('option:selected', el).data('price'));
    });
    price += parseInt($('#price-option-input').val());

    $('.price span').text(price);
  }); 
});

This calculator is working, but the problem is when I enter value for text input the result in price is not updating dynamically (I need to choose another option in selector for result updating)

Upvotes: 1

Views: 3712

Answers (4)

sergio0983
sergio0983

Reputation: 1288

You have to add keyUp event

 calculate = function(){
    var price = parseInt($('.price').data('base-price'));

    $('.price-option').each(function(i, el) {
      price += parseInt($('option:selected', el).data('price'));
    });
    price += parseInt($('#price-option-input').val());

    $('.price span').text(price);
}


$(document).ready(function () {
  $('#price-option-input', .price-option').change(calculate);
  $('#price-option-input', .price-option').keyup(calculate);
});

I think it´s worth it to explain that change event is fired when you unselect the input, or, in number type, when you use the up/down buttons.

Upvotes: 3

user3991493
user3991493

Reputation:

I have fixed your code and it works fine now http://plnkr.co/edit/pWSEimrKkA200jQK9w5a?p=preview

HTML:

 <p class="price" data-base-price="50">$<span>80</span></p>

<select name="s1" class="price-option">
    <option value="1" data-price="10">Item 1</option>
    <option value="2" data-price="20">Item 2</option>
</select>

<select name="s2" class="price-option">
    <option value="1" data-price="30">Item 3</option>
    <option value="2" data-price="40">Item 4</option>
</select>

<input type="text" name="price-option-input" id="price-option-input" onchange='updatePrice()'>

JS: 

function updatePrice(){

    var price = parseInt($('.price').data('base-price'));
console.log(price);
    $('.price-option').each(function(i, el) {
      price += parseInt($('option:selected', el).data('price'));
    });
    price += parseInt($('#price-option-input').val());

    $('.price span').text(price);

}

Upvotes: 0

Mike Perrenoud
Mike Perrenoud

Reputation: 67948

I believe you just need to use .html because that will set the inner HTML:

$('.price span').html(price);

And for future reference, multi-selectors like that aren't near as efficient as something like this:

$('.price').find('span').html(price);

Upvotes: 0

Christian Benseler
Christian Benseler

Reputation: 8075

You can add a button to do the computation, triggering the change event.

Example:

$("button").on("click", function() {
   $('.price-option').trigger("change");
});

Or, you can listen the keyup event from the input and at the enter key press, do the computation. The question is: when do you want to do the computation? With the answer, listen to the proper event and do the computation.

Upvotes: 0

Related Questions