Друзья, помогите разобраться с событием на select!
убил больше часа чтобы понять как при смене валюты динамически менять курс для доллара!
1 рубль - 100 материала 1 доллар - 7000 материала Когда вы в окне input начинаете вводить сумму - В строке: "Вы получите 10000 материала" - должен динамически меняться калькулятор - функция calculate2 должен считать исходя из курса ser_pr = 100 а когда доллар ser_pr = 7000; Буду безмерно благодарен любой помощи! Спасибо, друзья!
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--Подключаем библиотеку-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form name="pay_is" action="" method="post">
<table border="0" align="center">
<tr>
<td>
<input type="hidden" name="m" value="<?=$fk_merchant_id?>">
<div id="whats">Введите сумму в [РУБ]:</div>
<div id="whats1">
<input type="text" type="number" value="100" name="sum" size="7" id="psevdo" onchange="calculate2(this.value)" onkeyup="calculate2(this.value)" onfocusout="calculate2(this.value)" onactivate="calculate2(this.value)" ondeactivate="calculate2(this.value)">
Вы получите <span id="res_sum">10000</span> материала
</div>
</td>
</tr><tr><td>
валюта:
<select size="1" name="service" id="selsel">
<option selected="selected" value="1">рубли</option>
<option value="4"> доллары</option>
</select>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" name="pay_is" class="sumserf2" value="обменять">
</td></tr> </table>
</form>
</body>
document.getElementById("selsel").addEventListener("change", function () {
var opt = this.value;
var get = document.getElementById('psevdo');
if (opt == 4 ) {
document.getElementById('whats').innerHTML = "Введите сумму в [USD]: ";
get.value='500';
calculate2(7000);
} else {
document.getElementById('whats').innerHTML = "Введите сумму в [RUB]: ";
get.value='100';
calculate2(100);
}
});
function calculate2(st_q) {
var min = 0.01;
var ser_pr = 100;
var sum_insert = parseFloat(st_q);
$('#res_sum').html( (sum_insert * ser_pr).toFixed(0) );
$('#wm_summ').val(sum_insert);
}
|
crystaltrumpet,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<form name="pay_is" action="" method="post" id="pay_is">
<table border="0" align="center">
<tr>
<td>
<input type="hidden" name="m" value="<?=$fk_merchant_id?>">
<div id="whats">
Введите сумму в [RUB]:
</div>
<div id="whats1">
<input type="number" value="100" name="sum" size="7" id="psevdo"> Вы получите
<span id="res_sum">10000</span> материала
</div>
</td>
</tr>
<tr>
<td>валюта: <select size="1" name="service" id="selsel">
<option selected="selected" value="100">
рубли
</option>
<option value="7000">
доллары
</option>
</select></td>
</tr>
<tr>
<td align="center"><input type="submit" name="pay_is" class="sumserf2" value=
"обменять"></td>
</tr>
</table>
</form>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#pay_is').addEventListener('input',
function() {
var price = document.querySelector('#selsel').value,
num = +document.querySelector('#psevdo').value||0,
sum = price * num,
str = "Введите сумму в " + (price == 100 ? "[RUB]" : "[USD]");
document.querySelector('#res_sum').innerHTML = sum;
document.querySelector('#whats').innerHTML = str;
})
});
</script>
</body>
</html>
|
Текст при любом выборе различается только валютой, ну так поместите их в атрибуты, извлекая у выбранной опции с помещением в текст:
<div>Введите сумму в [<span id="whats">RUB</span>]:</div> - по умолчанию <option selected="selected" data-cur="RUB" value="1">рубли</option> <option value="4" data-cur="USD"> доллары</option>
$('#selsel').change(function() {
$('#whats').text($(this).children(':selected').data('cur'))
})
Но расчет только при изменении списка, значит по умолчанию расчет должен происходить и при вводе. А вот с самим расчетом: 1 рубль - 100 материала 1 доллар - 7000 материала это как, курсы валюты боком? |
| Часовой пояс GMT +3, время: 05:50. |