Javascript: dynamic calculation input value

Question

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)

try implementing onBlur on your text input

ControlAltDel
– ControlAltDel

2014-09-08 18:11:42 +00:00
Commented Sep 8, 2014 at 18:11 — ControlAltDel
– ControlAltDel, Commented Sep 8, 2014 at 18:11
or try to use the onKeyUp event.

low_rents
– low_rents

2014-09-08 18:13:52 +00:00
Commented Sep 8, 2014 at 18:13 — low_rents
– low_rents, Commented Sep 8, 2014 at 18:13

sergio0983 · Accepted Answer · 2014-09-09 08:24:14Z

3

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.

edited Sep 9, 2014 at 8:24

answered Sep 8, 2014 at 18:14

sergio0983

1,2988 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christian Benseler · Accepted Answer · 2014-09-08 18:11:38Z

0

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.

answered Sep 8, 2014 at 18:11

Christian Benseler

8,0839 gold badges42 silver badges73 bronze badges

1 Comment

Christian Benseler Over a year ago

So... when do you want to do the computation? This was an example of how you can trigger the change's event from $('.price-option'). You can trigger it when the input lost focus - blur() - or at the keyup/keypress, checking if the return/enter key has been pressed.

Mike Perrenoud · Accepted Answer · 2014-09-08 18:11:54Z

0

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

answered Sep 8, 2014 at 18:11

Mike Perrenoud

68.1k32 gold badges167 silver badges238 bronze badges

Comments

user3991493 · Accepted Answer · 2014-09-08 18:17:31Z

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

}

Collectives™ on Stack Overflow

Javascript: dynamic calculation input value

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related