<form class="uk-form">
<fieldset>
{# Metal #}
<select name="metal" class="uk-form-large uk-width-1-1 uk-margin-bottom">
<option value="gold">{{ 'METAL.GOLD'|t }}</option>
<option value="silver">{{ 'METAL.SILVER'|t }}</option>
</select>
{# Gold #}
<select name="gold" class="uk-form-large uk-width-1-1 uk-margin-bottom">
{% for select in theme_config.gold %}
<option value="{{ select.price }}">{{ select.sample }}</option>
{% endfor %}
</select>
{# Silver #}
<select name="silver" class="uk-form-large uk-width-1-1 uk-margin-bottom">
{% for select in theme_config.silver %}
<option value="{{ select.price }}">{{ select.sample }}</option>
{% endfor %}
</select>
<input name="weight" type="text" class="uk-form-large uk-width-1-1 uk-margin-bottom" value="1" placeholder="Вес">
<a name="send" class="uk-width-1-1 uk-button uk-button-large uk-button-primary">Рассчитать</a>
<p>Цена за грамм <span class="value">___</span> руб.</p>
<p>Сумма на руки <span class="result">___</span> руб.</p>
</fieldset>
</form>
<script>
$(document).ready(function(){
var gold = $("select[name=gold]").val() * 1;
var silver = $("select[name=silver]").val() * 1;
var weight = $("input[name=weight]").val() * 1;
// Показываем список проб и цену за грамм при загрузке
if ($("select[name=metal]").val() == "gold") {
$('select[name=silver]').addClass('uk-hidden');
$("span.value").text(gold);
$("span.result").text(gold * weight);
}
else {
$('select[name=gold]').addClass('uk-hidden');
$("span.value").text(silver);
$("span.result").text(silver * weight);
}
});
$(function () {
var gold = $("select[name=gold]").val() * 1;
var silver = $("select[name=silver]").val() * 1;
var weight = $("input[name=weight]").val() * 1;
// Отображаем список проб
$("select[name=metal]").change(function() {
if ($(this).val() == "gold") {
$('select[name=silver]').addClass('uk-hidden');
$('select[name=gold]').removeClass('uk-hidden');
}
else {
$('select[name=gold]').addClass('uk-hidden');
$('select[name=silver]').removeClass('uk-hidden');
}
})
// Расчитываем
$("a[name=send]").click(function() {
if ($('select[name=silver]').hasClass("uk-hidden")) {
var result = gold * weight;
} else {
var result = silver * weight;
}
$("span.value").text(gold);
$("span.result").text(result);
});
});
</script>
При загрузке страницы срабатывает. Меняется поле с пробами в зависимости от выбранного металла (select с пробами другого металла скрывается классом .uk-hidden).
Расчет стоимости по событию click не срабатывает (
https://jsfiddle.net/xw3tuchp/).