Develop Reference

javascript calculation on calculating once a client clicks on a form option

I am doing a small project on creating an order form.
I am trying to display the price per page once the client selects the time.
For example if the selected time is 4hour it should return 12usd.. if its 6hours it should return 10 usd......
<div class="col-md-6">
<div class=" custom-select" style="width:200px;">
<select class="form-control" id="time">
<option value="0">Time...</option>
<option value="1">4hrs</option>
<option value="2">6hrs</option>
<option value="3">1day</option>
<option value="4">2days</option>
<option value="5">3days</option>
<option value="6">4days</option>
<option value="7">5days</option>
<option value="8">6days</option>
<option value="9">7days</option>
<option value="10">After 7 days</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="bmd-label-floating">cpp</label>
<input type="text" class="form-control" id="cpp">
</div>
</div>

You can make something like this.
const selectElement = document.querySelector('.ice-cream');
selectElement.addEventListener('change', (event) => {
const result = document.querySelector('.result');
result.textContent = `You like ${event.target.value}`;
});
<label>Choose an ice cream flavor:
<select class="ice-cream" name="ice-cream">
<option value="">Select One …</option>
<option value="chocolate">Chocolate</option>
<option value="sardine">Sardine</option>
<option value="vanilla">Vanilla</option>
</select>
</label>
<div class="result"></div>

So you won't tell us in details so we have to guess
const prices = [0,12,10,9,8,7,6,5,4,3,2],
cpp = document.getElementById('cpp'),
time = document.getElementById('time')
time.addEventListener('change',function() {
cpp.value = prices[this.value]
})
// init if the select is already set from server
const change = new CustomEvent("change");
time.dispatchEvent(change);
<div class="col-md-6">
<div class=" custom-select" style="width:200px;">
<select class="form-control" id="time">
<option value="0">Time...</option>
<option value="1">4hrs</option>
<option value="2">6hrs</option>
<option value="3">1day</option>
<option value="4">2days</option>
<option value="5">3days</option>
<option value="6">4days</option>
<option value="7">5days</option>
<option value="8">6days</option>
<option value="9">7days</option>
<option value="10">After 7 days</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="bmd-label-floating">cpp</label>
<input type="text" class="form-control" id="cpp">
</div>
</div>

jquery multiplication - behind the scene calculation

I have this calculator:
This is my html :
<div class="row">
<div class="twenty columns">
<h2 class="secondary-title text-red2">Mortgage Utilisation Calculator</h2>
<form>
<div class="row forminput">
<div class="ten columns">
<p class="slider-label">Daily Flexi Account Balance (RM)</p>
<input type="text" class="daily-flexi-accbalance strictly-numbers" value="200000" />
</div>
<div class="ten columns">
<p class="slider-label">Number of Days in Month</p>
<div class="field type-dropdown">
<div class="picker picker-dd2">
<select class="dropdown2 numdays-month">
<option value="0">Please select</option>
<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>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
</div>
</div>
<div class="ten columns">
<p class="slider-label">Current Facility Limit (RM)</p>
<input type="text" class="curr-facilitylimit numeric-only" value="500000" />
</div>
<div class="ten columns">
<p class="slider-label">Excess Payment (RM)</p>
<input type="text" class="curr-facilitylimit numeric-only" value="" />
</div>
</div>
</form>
<div class="row bg-gray12">
<div class="ten columns bg-gray12 data-box2">
<div class="row">
<div class="twelve columns">Sum of Daily Flexi Account Balance</div>
<div class="eight columns text-right calc-result-sumflexiacc " data-prefix="RM " data-suffix="">RM 0</div>
</div>
</div>
<div class="ten columns bg-gray11 data-box2">
<div class="row">
<div class="twelve columns">Monthly Utilisation Rate</div>
<div class="eight columns text-right calc-result-mthly-utilisationrate text-right" data-prefix="RM " data-suffix="">0 %</div>
</div>
</div>
</div>
<!-- <div class="row bg-gray9 data-box2 font-brighter">
<div class="fifteen columns ">Total Amount Payable</div>
<div class="five columns text-right calc-result-totalpayable" data-prefix="RM " data-suffix="">RM 0</div>
</div> -->
</div>
</div>
I have this function to calculate the sum of daily flexi acc
function calcSumDailyFlexiAccBalance() {
var numDaysMonth;
$(".numdays-month").on('change', function() {
numDaysMonth = parseInt($(".numdays-month").val(), 10);
});
var dailyFlexi = parseInt($(".daily-flexi-accbalance").val(), 10);
var resultDaysFlexi = numDaysMonth * dailyFlexi;
var roundResult = Math.round(resultDaysFlexi/100)*100
}
In order to get the value for field: sum of daily flexi account balance - the calculation will be daily flexi account balance * num of days - the result is rounded up to the nearest hundredth.
FOR EXAMPLE
daily flexi account balance is : 265806,
num of day : 31,
the sum of daily flexi acc balance will be : 8,239,986 and the correct output will be 8,240,000
for some reason I don't think my calculation is outputting the correct amount because I'm getting NaN

Change the number of days dropdown, it will log the output of your calculation, which looks correct (i.e. No NaN)
function init() {
$(".numdays-month").on('change',
function() {
var numDaysMonth;
numDaysMonth = parseInt($(".numdays-month").val(), 10);
var dailyFlexi = parseInt($(".daily-flexi-accbalance").val(), 10);
var resultDaysFlexi = numDaysMonth * dailyFlexi;
var roundResult = Math.round(resultDaysFlexi/100)*100
console.log(roundResult);
}
);
}
$(document).ready(init);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<div class="row">
<div class="twenty columns">
<h2 class="secondary-title text-red2">Mortgage Utilisation Calculator</h2>
<form>
<div class="row forminput">
<div class="ten columns">
<p class="slider-label">Daily Flexi Account Balance (RM)</p>
<input type="text" class="daily-flexi-accbalance strictly-numbers" value="200000" />
</div>
<div class="ten columns">
<p class="slider-label">Number of Days in Month</p>
<div class="field type-dropdown">
<div class="picker picker-dd2">
<select class="dropdown2 numdays-month">
<option value="0">Please select</option>
<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>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
</div>
</div>
<div class="ten columns">
<p class="slider-label">Current Facility Limit (RM)</p>
<input type="text" class="curr-facilitylimit numeric-only" value="500000" />
</div>
<div class="ten columns">
<p class="slider-label">Excess Payment (RM)</p>
<input type="text" class="curr-facilitylimit numeric-only" value="" />
</div>
</div>
</form>
<div class="row bg-gray12">
<div class="ten columns bg-gray12 data-box2">
<div class="row">
<div class="twelve columns">Sum of Daily Flexi Account Balance</div>
<div class="eight columns text-right calc-result-sumflexiacc " data-prefix="RM " data-suffix="">RM 0</div>
</div>
</div>
<div class="ten columns bg-gray11 data-box2">
<div class="row">
<div class="twelve columns">Monthly Utilisation Rate</div>
<div class="eight columns text-right calc-result-mthly-utilisationrate text-right" data-prefix="RM " data-suffix="">0 %</div>
</div>
</div>
</div>
<!-- <div class="row bg-gray9 data-box2 font-brighter">
<div class="fifteen columns ">Total Amount Payable</div>
<div class="five columns text-right calc-result-totalpayable" data-prefix="RM " data-suffix="">RM 0</div>
</div> -->
</div>
</div></body>

The problem is with Math.round.
You're using Math.round(resultDaysFlexi/100)*100 - so you're rounding it before final multiplication by 100.
Try to remove rounding or apply it only to final result.
Another useful tip is to add console.log after every step of calculation and check what is current value of your calculation, so you can see when is it starting to go wrong.

I have tried your logic in jsfiddle here after modifying event bindings. And it is working same as your example. Then what is the problem.
Here is my JS changes:
$(document).ready(function(e) {
$(".numdays-month").on('change', function() {
calcSumDailyFlexiAccBalance();
});
function calcSumDailyFlexiAccBalance(){
var numDaysMonth;
numDaysMonth = parseInt($(".numdays-month").val(), 10);
var dailyFlexi = parseInt($(".daily-flexi-accbalance").val(), 10);
var resultDaysFlexi = numDaysMonth * dailyFlexi;
var roundResult = Math.round(resultDaysFlexi/100)*100;
$('.calc-result-sumflexiacc').html(roundResult);
}
});

Append Select Value to Title

I am trying to append the select value for each div to its heading. How can I grab the value within each div then append it?
I want to append this on page load and not wait until a click or change takes effect. Here is a jsfiddle https://jsfiddle.net/dqfvyvdt/2/
Markup: Repeated multiple times and each box will have a different selected value.
<div class="module">
<h3>This is a </h3>
<select name="type" class="type">
<option selected="selected" value="car">Car</option>
<option value="car">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
JS:
var title = $('.module').find('h3');
var type = $('.module').find('.type').val();
$(title).append(type);

$('.module').find('.type').val() gets the value of the first type element, you need to find the value of each type in relation to the h3 element.
So you need to iterate over the h3 and find each one's type value and add it to its contents
Use .append()
$('.module h3').append(function(i, text){
return $(this).next().val()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="module">
<h3>This is a </h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
<div class="module">
<h3>This is a </h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike" selected>Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
<div class="module">
<h3>This is a </h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter" selected>Skooter</option>
</select>
</div>
If you want to update the content of change also then
$('.module .type').change(function(i, text) {
var $this = $(this);
$this.prev().find('.h3-type').text($(this).find('option:selected').text());
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="module">
<h3>This is a <span class="h3-type"></span></h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
<div class="module">
<h3>This is a <span class="h3-type"></span></h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike" selected>Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
<div class="module">
<h3>This is a <span class="h3-type"></span></h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter" selected>Skooter</option>
</select>
</div>

Multi div id hide/show Jquery

I've been trying to get a div to show and hide based on a dropdown.
I have 3 hidden divs but only 2 show. The issue is I have to have multiple ID's for some divs.
the two display as handset are fine but the id="Handset Tablet" won't show. Does my jquery need to see if it just contains the id as I guess it is just looking for "Handset" not two.
Here is my code. I need to have all 3 divs with Handset show and Tablet only show the shared one somehow.
http://jsfiddle.net/jonasj/k2sxdh5s/
<div class="form-group"><label class="col-md-3 control-label">Product Type</label>
<div class="col-md-9">
<select name="product_type" id="product_type" class="form-control check_record">
<option selected value="0" >-Select Product Type-</option>
<option value="Handset">Handset</option>
<option value="Tablet" >Tablet</option>
</select>
</div>
</div>
<div id="Handset" class="hide_listing form-group"><label class="col-md-3 control-label">Spec</label>
<div class="col-md-9">
<select class="form-control" name="spec">
<option selected value="" disbaled>- Device Spec -</option>
</select>
</div>
</div>
<div id="Handset" class="hide_listing form-group"><label class="col-md-3 control-label">Capacity</label>
<div class="col-md-9">
<select class="form-control" name="device_capacity">
<option selected disabled value="">- Select Device Capacity -</option>
<option value="2GB">2GB</option>
<option value="4GB">4GB</option>
<option value="8GB">8GB</option>
<option value="16GB">16GB</option>
<option value="32GB">32GB</option>
<option value="64GB">64GB</option>
<option value="128GB">128GB</option>
<option value="256GB">256GB</option>
<option value="Unknown">Unknown</option>
</select>
</div>
</div>
<div id="Handset Tablet" class="hide_listing form-group"><label class="col-md-3 control-label">Sim Status</label>
<div class="col-md-9">
<select class="form-control" name="device_sim">
<option selected disabled value="">- Select Device Sim Status -</option>
<option value="Sim Free">Sim Free</option>
<option value="Network Locked">Network Locked</option>
<option value="Network Unlocked">Network Unlocked</option>
<option value="Unknown">Unknown</option>
</select>
</div>
</div>
<script>
$(document).ready(function () {
$('.hide_listing').hide();
$('').show();
$('#product_type').change(function () {
$('.hide_listing').hide();
$('div#'+$(this).val()).show();
})
});
</script>

Since IDs are unique, you can use classes to achieve what you want:
<div class="form-group"><label class="col-md-3 control-label">Product Type</label>
<div class="col-md-9">
<select name="product_type" id="product_type" class="form-control check_record">
<option selected value="0" >-Select Product Type-</option>
<option value="Handset">Handset</option>
<option value="Tablet">Tablet</option>
</select>
</div>
</div>
<div class="Handset hide_listing form-group"><label class="col-md-3 control-label">Spec</label>
<div class="col-md-9">
<select class="form-control" name="spec">
<option selected value="" disbaled>- Device Spec -</option>
</select>
</div>
</div>
<div class="Handset hide_listing form-group"><label class="col-md-3 control-label">Capacity</label>
<div class="col-md-9">
<select class="form-control" name="device_capacity">
<option selected disabled value="">- Select Device Capacity -</option>
<option value="2GB">2GB</option>
<option value="4GB">4GB</option>
<option value="8GB">8GB</option>
<option value="16GB">16GB</option>
<option value="32GB">32GB</option>
<option value="64GB">64GB</option>
<option value="128GB">128GB</option>
<option value="256GB">256GB</option>
<option value="Unknown">Unknown</option>
</select>
</div>
</div>
<div class="Handset Tablet hide_listing form-group"><label class="col-md-3 control-label">Sim Status</label>
<div class="col-md-9">
<select class="form-control" name="device_sim">
<option selected disabled value="">- Select Device Sim Status -</option>
<option value="Sim Free">Sim Free</option>
<option value="Network Locked">Network Locked</option>
<option value="Network Unlocked">Network Unlocked</option>
<option value="Unknown">Unknown</option>
</select>
</div>
</div>
And change your function to include the classes:
$(document).ready(function () {
$('.hide_listing').hide();
$('#product_type').change(function () {
$('.hide_listing').hide();
$('div.'+$(this).val()).show();
})
});
Though you may want to just go with classes all together, as to avoid confusion in the future.
DEMO: http://jsfiddle.net/k2sxdh5s/7/

Put this as HTML
<div class="form-group"><label class="col-md-3 control-label">Product Type</label>
<div class="col-md-9">
<select name="product_type" id="product_type" class="form-control check_record">
<option selected value="0" >-Select Product Type-</option>
<option value="Handset">Handset</option>
<option value="Tablet" >Tablet</option>
</select>
</div>
</div>
<div class="Handset hide_listing form-group"><label class="col-md-3 control-label">Spec</label>
<div class="col-md-9">
<select class="form-control" name="spec">
<option selected value="" disbaled>- Device Spec -</option>
</select>
</div>
</div>
<div class="Handset hide_listing form-group"><label class="col-md-3 control-label">Capacity</label>
<div class="col-md-9">
<select class="form-control" name="device_capacity">
<option selected disabled value="">- Select Device Capacity -</option>
<option value="2GB">2GB</option>
<option value="4GB">4GB</option>
<option value="8GB">8GB</option>
<option value="16GB">16GB</option>
<option value="32GB">32GB</option>
<option value="64GB">64GB</option>
<option value="128GB">128GB</option>
<option value="256GB">256GB</option>
<option value="Unknown">Unknown</option>
</select>
</div>
</div>
<div class="Handset Tablet hide_listing form-group"><label class="col-md-3 control-label">Sim Status</label>
<div class="col-md-9">
<select class="form-control" name="device_sim">
<option selected disabled value="">- Select Device Sim Status -</option>
<option value="Sim Free">Sim Free</option>
<option value="Network Locked">Network Locked</option>
<option value="Network Unlocked">Network Unlocked</option>
<option value="Unknown">Unknown</option>
</select>
</div>
</div>
and put this as jquery
$(document).ready(function () {
$('.hide_listing').hide();
$('#product_type').change(function () {
$('.hide_listing').hide();
var show_div = $(this).val();
if(show_div == "Handset") {
$(".Handset").show();
} else if (show_div == "Tablet") {
$(".Tablet").show();
}
})
});
This will make it work...surely

Show/Hide toggle not working with select name for database output

This was originally pointed out and solved this morning, but then I had to add name="region_option" to the select element so that it would output the value into a SQL query. The database/query stuff is all good, however I could not get the Show/Hide to work properly with the regions once again. I'm stuck at getting it to work with the select having the name="region_option".
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="bodytype">
<h2>Bodytype</h2>
<input class="bodytype--owls" name="bodytype_option" type="radio" value="owls">Owls</input>
<input class="bodytype--others" name="bodytype_option" type="radio" value="others">Others</input>
</div>
<div class="country">
<h2>Pick country</h2>
<select name="country_option">
<option value="not-selected">Select the country</option>
<option value="England">England</option>
<option value="Scotland">Scotland</option>
<option value="Ireland">Ireland</option>
<option value="Wales">Wales</option>
</select>
</div>
<div class="not-selected">
<h2>Notice!</h2>
<p>Please select a country to be able to pick the region.</p>
</div>
<div class="regions" id="England">
<h3>Pick region in England</h3>
<select name="region_option">
<option value="North">North</option>
<option value="South">South</option>
<option value="East">East</option>
<option value="West">West</option>
<option value="Midlands">Midlands</option>
</select>
</div>
<div class="regions" id="Scotland">
<h3>Pick region in Scotland</h3>
<select name="region_option">
<option value="North">North</option>
<option value="South">South</option>
</select>
</div>
<div class="regions" id="Ireland">
<h3>Pick region in Ireland</h3>
<select name="region_option">
<option value="Northern">Northern</option>
<option value="Republic">Republic</option>
</select>
</div>
<div class="regions" id="Wales">
<h3>Pick region in Wales</h3>
<select name="region_option">
<option value="North">North</option>
<option value="South">South</option>
</select>
</div>
<br /><br />
<button class="identify__button">Identify</button>
jQuery
$(document).ready(function(){
$('#England, #Scotland, #Ireland, #Wales').hide();
$('.country_option').change(function() {
$('.not-selected, #England, #Scotland, #Ireland, #Wales').hide();
$('#' + $(this).val()).show();
});
});
I would love to know what I'm missing to fix this, and why did it not work in the first place. I have taken the liberty to put it in a CodePen for ease of convenience.
Thanks in advance.

You have a selector for class=country_option when it is actually name=country_option.
try
$('[name="country_option"]').change(function() {
JSFiddle: http://jsfiddle.net/mvt0982x/
Or better yet (to be more obvious):
$('select[name="country_option"]').change(function() {