CODEWITHSUNDEEP
javascriptjquery
Azima
Azima

Reputation: 4151

Take values from input field, calculate, and display total

I'm trying to take value from input field, do simple calculation and display the answer to the form element.

<script type="text/javascript">
    $(document).ready(function () {
        $("#number_ticket").change(function () {
            var adult = parseInt($(this).val()) * parseInt($('#price_adults').textContent);
            $('#total_price_adults').text(adult);
        });
    });
</script>

Here's my HTML

<div class="st_adults_children">
    <span class="label">Adults</span>
    <div class="input-number-ticket">
        <input type="number" name="number_ticket" value="1" min="1"
                                                           max="10" placeholder="Number ticket of Adults"
                                                           id="number_ticket">
    </div>
    ×
    $<span class="price_adults" id="price_adults">{{$single->price}}</span>
    =
    <span class="total_price_adults" id="total_price_adults">$93</span>
</div>

I've tried removing parseInt() from $(this).val(), since the value is already integer. I couldn't work out what's wrong here.

Upvotes: 0

Views: 305

Answers (3)

Vibha Chosla
Vibha Chosla

Reputation: 713

you can use .html() instead of .text() property.

like , parseInt($('#price_adults').html());

hope this will help you.

Upvotes: 0

Ben Hull
Ben Hull

Reputation: 7673

There are a few ways you can improve what you've got:

First - when you're working in javascript, look up and cache elements and values where you can. For example, if you know the ticket price will not change after the page is loaded, you can look up the number once, and then re-use it. Basically, you shouldn't be going off to the DOM to find elements or values inside an event handler if you don't need to.

Second tip - you can use some simple CSS to format prices, so that your elements can be the straight value, and you don't need to worry about coercing back and forth between '$x.xx' and 'x.xx'.

Third, you probably don't want to parseInt on currencies, since they can contain cents. parseFloat would retain your cents, though you may not need it if you have control over the values.

Try this (fiddle)

HTML:

<div class="st_adults_children">
    <span class="label">Adults</span>
    <span class="input-number-ticket">
        <input type="number" name="number_ticket" value="1" min="1" max="10" placeholder="Number ticket of Adults" id="number_ticket">
    </span>
    ×
    <span class="price price_adults" id="price_adults">10</span>
    =
    <span class="price total_price_adults" id="total_price_adults"></span>
</div>

JS

//Cache the elements you're interested in
var ticketPrice = $('#price_adults').html(),
        totalElement = $('#total_price_adults'),
    quantityInput = $('input[name=number_ticket]');

//Watch change as well as click/keyup (improves the responsiveness of the number input controls)
quantityInput.on('change click keyup', function () {
  totalElement.html(quantityInput.val() * ticketPrice);
});

//Initialise on ready
quantityInput.trigger('change');

CSS:

.price::before {
  content: '$';
}

Upvotes: 0

MrCode
MrCode

Reputation: 64536

The issue is with $('#price_adults').textContent. jQuery objects don't have a textContent property, DOM Nodes do.

The jQuery method is .text():

var adult = parseInt($(this).val()) * parseInt($('#price_adults').text());

If you want to use textContent then you can access the DOM element:

var adult = parseInt($(this).val()) * parseInt($('#price_adults')[0].textContent);
//                                                               ^^^ get the DOM node

Upvotes: 2

Related Questions