Хорошо, я сломаю это.
Во-первых, это решение использует библиотеку jQuery, поэтому вам нужно сослаться на это в разделе <HEAD>.Вы захотите сослаться на файл javascript, в который вы будете помещать свой код:
<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>
Далее вам необходимо внести небольшие изменения в разметку.
<input value="42500" type="text" name="pharmacist" />
<select>
<input value="17500" type="text" name="dispenser" />
становится:
<input value="42500" type="text" name="pharmacist" id="pharmacist" />
<select id="rate">
<input value="17500" type="text" name="dispenser" id="dispenser" />
Смена ключа - новые атрибуты id.Они будут использоваться вашим javascript для идентификации ключевых элементов кода (вы можете использовать для этого атрибуты name, как предлагает JQone - я предпочитаю использовать id с точки зрения стиля ипотому что код селектора jQuery / CSS меньше).
Наконец, вы создаете файл javascript (я называю его «script.js» здесь) и помещаете его в правильную папку на веб-сайте (в соответствии сс путем, используемым в разделе HEAD документа HTML, это будет подпапка корневой папки веб-сайта, называемая «сценарии»).Файл будет иметь следующее содержимое:
// 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;
}
Скорее всего, формула, которую я использовал для расчета изменения ставки, слишком упрощена, но я не знаю бизнес-требований в вашей ситуации.Вам нужно будет найти правильную формулу самостоятельно.
В основном, если вы выполните эти шаги, значения должны быть изменены при переключении списка выбора между годовой и почасовой.