Hello everybody, Welcome back to Learn Tech Tips Blog, Thanks for Enjoy my blog
Many people asking me how to display numbers as Fraction. So This topic today I will share with you how to display a fraction number on HTML, (I am using CAKE PHP Framework). This no need CAKEPHP framework, This can work on any HTML file.
Tiktok
This below code will be helpful for you when you working with any digits need display numbers as fraction. Collect it carefully because I think you will use it on the future if you working as web developer. Believe me 😀
On HTML, you just define type=’text’ and give it one name, I choose effective_rate because my project is using this name, you can change any name belong to you, but remember on the javascript you should set the same name with this HTML’s input
<input type=“text” class=“form-control” style=“margin-bottom:10px“
name=“effective_rate” id=“effective_rate”>
And the script will be
We have a formatter with minimumFractionDigits, maximunFractionDigits define for the number display on the UI.
When you use it just use formatter.format(), That’s all
<script>
$(document).ready(function() {
const formatter = new Intl.NumberFormat(‘en-US’, {
currency: ‘USD’,
minimumFractionDigits: 2, // if have this line, the number will
be: 2.00, 2.01, 2.86 -> it mean show the minimum fraction digits
maximumFractionDigits: 2,
});
// when id effective rate change event
$(‘#effective_rate’).on(‘change’, function() {
$(“#effective_rate”).val(
formatter.format( $(“#effective_rate”).val() ) // format the number
);
});
});
</script>
Here is the full source code, you can reference here.
<div class=“row”>
<div class=“col-xs-12”>
<div class=“box box-primary”>
<div class=“box-header”>
<h3 class=“box-title”><?php echo __(‘Display Fraction Digits Number’);
?></h3>
</div>
<div class=“box-body”>
<?php echo $this->Form->create(‘Demo’, array(‘role’ => ‘form’)); ?>
<fieldset>
<input type=“text” class=“form-control number_rules”
style=“margin-bottom:10px“ name=“effective_rate” id=“effective_rate”>
<?php echo $this->Form->submit(‘Submit’, array(
‘class’ => ‘btn btn-large btn-primary’)); ?>
</fieldset>
<?php echo $this->Form->end(); ?>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
const formatter = new Intl.NumberFormat(‘en-US’, {
currency: ‘USD’,
minimumFractionDigits: 2, // if have this line,
// the number will be: 2.00, 2.01, 2.86
// -> it mean show the minimum fraction digits
maximumFractionDigits: 2,
});
$(‘#effective_rate’).on(‘change’, function() {
// when id effective rate change event
$(“#effective_rate”).val(
formatter.format( $(“#effective_rate”).val() ) // format the number
);
});
});
</script>
For the case you still don’t know how to use it, you can check my guideline video
If you have any feedback, questions. Leave your comment, we can discuss about it.
Learn Tech Tips – Zidane
