I'm working on this page - http://www.medilogicuk.com/v1/products/calculate-savings/
It's a simple calculator that calculates savings. At the moment the default values in the "Pharmacist" & "Dispenser/Technician" inputs are per annum figures, when the user clicks on the drop down and selects "per hour" I want the figures to automatically change to per hour (via a simple calculation)... and vice versa. The input needs to (re)calculate whatever number the user enters, so if they enter 50.00 and change to per annum then the per annum figure needs to reflect that.
How could I implement this?
Here's my code to create that table:
<table border="0">
<tr>
<td colspan="3"><h3>Current service costs</h3></td>
</tr>
<tr>
<td width="440"><p>Pharmacist</p></td>
<td><p style="padding-left:5px!IMPORTANT;">£
<input value="42500" type="text" name="pharmacist" />
</p></td>
<td width="5" rowspan="2"><select>
<option value="perannum">per annum</option>
<option value="perhour">per hour</option>
</select></td>
</tr>
<tr>
<td><p>Dispenser / Technician</p></td>
<td><p style="padding-left:5px!IMPORTANT;">£
<input value="17500" type="text" name="dispenser" />
</p></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
Worked out a solution for you: http://jsfiddle.net/tive/Gya43/
javascript
$(function() {
$('#ddlDuration').change(function() {
var pharmacist = $('#pharmacist');
var dispenser = $('#dispenser');
if ($(this).val() == 'perhour') {
pharmacist.val(toHour(pharmacist.val()));
dispenser.val(toHour(dispenser.val()));
} else {
pharmacist.val(toAnnual(pharmacist.val()));
dispenser.val(toAnnual(dispenser.val()));
}
});
function toHour(annumRate) {
var num = (annumRate / 8760);
return num.toPrecision(annumRate.length);
}
function toAnnual(hourRate) {
var num = (hourRate * 8760);
return num.toFixed(0);
}
});
If you run into troubles with num.toFixed(2) try num.toPrecision(2) since that will be more precise.
EDIT:
I noticed when using the length of your number in the .toPrecision method, you will always return the original value. It's not so well rounded down but at least you won't get any mistakes. If you want to tweak this behaviour for rounded numbers I suggest to use a placeholder field/attribute/something to store value.
You need to do something like below.
assuming that the "select" has got and id "ddlDuration"
using JQuery
$('#ddlDuration').change(function(){
if($(this.val) == 'perhour'{
pharmacist = $('input[name="pharmacist"]');
pharmacist.val( calculateHourlyFromAnnual( pharmacist.val() ) );
}
});
function calculateHourlyFromAnnual( annumRate )
{
return 100; // calculate the value of the hourly rate based on the per-annum rate
}
Okay, I'll break it down.
Firstly, this solution uses the jQuery library so you need to reference this in the <HEAD> section. You will so want to reference the javascript file where you will be placing your code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- You need to define the file name and path as appropriate for yourself. -->
<script type="text/javascript" src="http://path-to-your-url.com/scripts/script.js"></script>
</head>
...
</html>
Next you need to make some small changes to your markup.
<input value="42500" type="text" name="pharmacist" />
<select>
<input value="17500" type="text" name="dispenser" />
becomes:
<input value="42500" type="text" name="pharmacist" id="pharmacist" />
<select id="rate">
<input value="17500" type="text" name="dispenser" id="dispenser" />
The key change being the new id attributes. These will be used by your javascript to identify the key elements in the code (you could use the name attributes for this, as JQone suggests - I prefer using id from a style point of view and because the jQuery/CSS selector code is smaller).
Finally, you create a javascript file (I'm calling it "script.js" here) and place it in the correct folder in the website (in keeping with the path used in the HEAD section of the HTML doc, this will be a sub-folder of the website's root folder called "scripts"). The file will have the following contents:
// This code sets up the javascript. It is saying: 'when the document is ready, register the "changeRate" function with the "change" event of the select box'. So whenever the select box's value is changed, the function will be called.
$( document ).ready( function() {
$( 'select#rate' ).change( changeRate );
} );
// This sets the values of the text values based upon the selected rate and the existing value.
var changeRate = function() {
var rate = $( this );
var pharmacist = $( 'input#pharmacist' );
var dispenser = $( 'input#dispenser' );
if ( rate.val() == 'perhour' ) {
pharmacist.val( calculateHourlyFromAnnual( pharmacist.val() ) );
dispenser.val( calculateHourlyFromAnnual( dispenser.val() ) );
}
else if ( rate.val() == 'perannum' ) {
pharmacist.val( calculateAnnualFromHourly( pharmacist.val() ) );
dispenser.val( calculateAnnualFromHourly( dispenser.val() ) );
}
};
// Calculates an hourly rate based upon the supplied per annum rate. At the moment this doesn't take into account scenarios where the provided value is empty or is not a number so you will need to adjust appropriately.
function calculateHourlyFromAnnual( annumRate )
{
-- Making the assumption that a per-annum rate of $50,000 translates to an hourly rate of $50
return annumRate / 1000;
}
// Calculates a per-annum rate based upon the supplied hourly rate. At the moment this doesn't take into account scenarios where the provided value is empty or is not a number so you will need to adjust appropriately.
function calculateAnnualFromHourly( hourlyRate )
{
-- Making the assumption that an hourly rate of $50 translates to a per-annum rate of $50,000
return hourlyRate * 1000;
}
More than likely, the formula I've used for calculating the rate change is overly simplistic but I don't know the business requirements in your situation. You'll have to figure out the correct formula yourself.
Basically, if you follow these steps the values should be changed as you switch the select list between per annum and per hour.
You have to use JavaScript to solve this.
With jQuery e.g. register a change event listener on your dropdown element and update the value of the two input fields when the selected value of the dropdown element changes.
