Jump to content

Update Price based on Quantity Selected


Moorcam
 Share

Go to solution Solved by mac_gyver,

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.