Update Price based on Quantity Selected

[Moorcam]

Hi guys,

I feel this is a Javascript issue so here goes.

I am trying to update the total cost of a ticket by selecting the number of passengers from a dropdown.

It works. However, not when I format the output within the js by using a number_format() function.

Here is the Form:

                 <div class="row book-now">
                        <div class="col-md-12">
                            <?php echo form_open(base_url().'payment',array('class' => '')); ?>
                                <input type="hidden" name="p_id" value="<?php echo $id; ?>">
                                <input type="hidden" name="p_price_single" value="<?php echo number_format($tour['p_price_single'],2); ?>">
                                <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label>Total Price (per person)</label>
                                            <div class="mb_5" style="font-size:32px;">
                                                <?php echo $symbol; ?><?php echo number_format($tour['p_price_single'],2); ?>
                                            </div>
                                            <div class="sep mb_10"></div>
                                            <label>Number of Persons</label>
                                            <select id="numberPerson" name="number_of_person" class="custom-select select2 mb_15" style="width: auto;">
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                                <option value="10">10</option>
                                                <option value="11">11</option>
                                                <option value="12">12</option>
                                                <option value="13">13</option>
                                                <option value="14">14</option>
                                                <option value="15">15</option>
                                                <option value="16">16</option>
                                                <option value="17">17</option>
                                                <option value="18">18</option>
                                                <option value="19">19</option>
                                                <option value="20">20</option>
                                            </select>
                                            <div class="sep mb_15"></div>
                                            <label>Total Price</label>
                                            <div class="mb_15" style="font-size:32px;">
                                                <?php echo $symbol; ?><span id="totalPrice"><?php echo number_format($tour['p_price_single'], 2); ?></span>
                                            </div>
                                        </div>
                                    </div>                                
                                </div>

Here is the JS without the function:

<script>
    $(document).ready(function() {
        $('#numberPerson').on('change',function() {
            var selectVal = $('#numberPerson').val();
            var selectPrice = <?php echo $p_price['p_price_single']; ?>;
            var totalPrice = selectVal * selectPrice;
             $('#totalPrice').text(totalPrice);
        });
    });
</script>

The above works. However, when the total is calculated from the selection in the dropdown, the total amount loses format. So, for example, if 2 is selected it will show $3000 instead of $3,000.00

Here is the Javascript WITH the number_format function:

<script>
    $(document).ready(function() {
        $('#numberPerson').on('change',function() {
            var selectVal = $('#numberPerson').val();
            var selectPrice = <?php echo number_format($p_price['p_price_single'], 2); ?>;
            var totalPrice = selectVal * selectPrice;
             $('#totalPrice').text(totalPrice);
        });
    });
</script>

This just doesn't allow any calculation. The total will stay formatted but just not calculate.

Any help would be greatly appreciated.

Cheers,

Dan

[mac_gyver]

the comma thousands separator is a display convention that makes a number human friendly. it has no meaning to a computer and actually breaks the value.

you are calculating and displaying a value in the browser. you must format that number in the browser when you display it.

2 hours ago, Moorcam said:

<input type="hidden" name="p_price_single" value="<?php echo number_format($tour['p_price_single'],2); ?>">

i hope you are not planning on using the price from this hidden field, as it can be set to anything, such as .01, in the submitted data. only the id and the quantity should be submitted.

[Moorcam]

20 minutes ago, mac_gyver said:

the comma thousands separator is a display convention that makes a number human friendly. it has no meaning to a computer and actually breaks the value.

you are calculating and displaying a value in the browser. you must format that number in the browser when you display it.

i hope you are not planning on using the price from this hidden field, as it can be set to anything, such as .01, in the submitted data. only the id and the quantity should be submitted.

Hi there,

Thanks for the reply.

No, only the ID and quantity is being sent forward.

I have tried a few different suggestions I have found on Google with this but nothing working. I guess it's not a major issue with "$3000" being displayed rather than "$3,000.00" but I am stubborn lol

[mac_gyver]

<script>
const format = (num) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(num);
</script>

replace $('#totalPrice').text(totalPrice); with $('#totalPrice').text(format(totalPrice));

[Moorcam]

On 10/13/2022 at 3:38 AM, mac_gyver said:

<script>
const format = (num) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(num);
</script>

replace $('#totalPrice').text(totalPrice); with $('#totalPrice').text(format(totalPrice));

Tried that man. Still no change. Total stays the same.

[Moorcam]

On 10/13/2022 at 3:38 AM, mac_gyver said:

<script>
const format = (num) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(num);
</script>

replace $('#totalPrice').text(totalPrice); with $('#totalPrice').text(format(totalPrice));

Scrap my last reply. I am tired and read it wrong. Been driving Interstate last few days.

Did it again, looked at it, went, nope, then looked again, did it, and yep. You are a legend. Thank you.

[Moorcam]

Just adding to this.

I also wanted this to calculate tax and format with the correct locale, tax name (example: GST for Australia). So, after hours of clowning around, pulling hair out, Googling, and channelling the masters of Code who have long passed away, I finally have it doing what I want.

For those of you in the same creek without a paddle, I will share my newfound expertise with you:

<?php
if($setting['site_currency'] == 'EUR') {
	$locale = 'en-IE';
}
if($setting['site_currency'] == 'GBP') {
	$locale = 'en-GB';
}
if($setting['site_currency'] == 'USD') {
	$locale = 'en-US';
}
if($setting['site_currency'] == 'AUD') {
	$locale = 'en-AU';
}
?>

<script>
    $(document).ready(function() {
		
        $('#numberPerson').on('change',function() {
			var format = (num) => new Intl.NumberFormat('<?php echo $locale; ?>', { style: 'currency', currency: '<?php echo $setting['site_currency']; ?>' }).format(num);
            var selectVal = $('#numberPerson').val();
            var selectPrice = <?php echo $p_price['p_price_single']; ?>;
            var taxRate = <?php echo $setting['tax_amount']; ?>;
            var salesTax = selectPrice * taxRate / 100;
            var total = selectPrice + salesTax;
            var totalPrice = selectVal * total;
             $('#totalPrice').text(format(totalPrice));
        });
    });
</script>

It's probably not what the true experts would do but it works and does what I want it to do and that's what matters.

Love you Bye