Take values from input field, calculate, and display total

Question

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.

MrCode · Accepted Answer · 2017-06-13 10:09:15Z

2

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

answered Jun 13, 2017 at 10:09

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

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

1 Comment

Azima Over a year ago

Using .text() is still giving me 'NaN' result.. Do we need to parse the result too?

Ben Hull · Accepted Answer · 2017-06-13 10:27:18Z

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: '$';
}

Vibha Chosla · Accepted Answer · 2017-06-13 10:29:00Z

0

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

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

hope this will help you.

answered Jun 13, 2017 at 10:29

Vibha Chosla

7135 silver badges13 bronze badges

Collectives™ on Stack Overflow

Take values from input field, calculate, and display total

3 Answers 3

1 Comment

HTML:

JS

CSS:

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

HTML:

JS

CSS:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related