Как перемножить собранные из select данные на определённое число?

Question

[Nikolay Matyushkin]

Всем привет. C JS пока что плохо и всё, и то до чего я пока додумался, мало для нужной реализации.
А ситуация такая. Есть стартовая стоимость товара 100 рублей. Есть 3 select-а с бонусами к товару, от выбора которых, будет зависеть конечная стоимость товара. Т.е. например пользователь выбрал из первого input 2 бонуса и из второго 5 супербонусов, то конечная стоимость будет 1000 рублей, если выберет только из первого select 2 бонуса, то конечная стоимость будет 200 рублей.

<form name="myForm" action="send_my.php" method="post">
<table>
<tr>
<td><select name="num">
<option>Выбрать</option>
<option value="10">1 бонус</option>
<option value="20">2 бонуса</option>
<option value="30">3 бонуса</option>
<option value="40">4 бонуса</option>
<option value="50">5 бонусов</option>
</select></td>
<td><select name="num">
<option>Выбрать</option>
<option value="10">1 супербонус</option>
<option value="20">2 супербонуса</option>
<option value="30">3 супербонуса</option>
<option value="40">4 супербонуса</option>
<option value="50">5 супербонусов</option>
</select></td>
<td><select name="num">
<option>Выбрать</option>
<option value="10">1 мегабонус</option>
<option value="20">2 мегабонуса</option>
<option value="30">3 мегабонуса</option>
<option value="40">4 мегабонуса</option>
<option value="50">5 мегабонусов</option>
</select></td>
</tr>
</table>
</form>

Вот что получилось у меня
Во первых я не смог реализовать механизм с несколькими select
Во вторых нужно работать с value option, а не с их названиями
И в третьих у меня не получилось вывести всё это в input text, чтобы потом дальше с этим числом работать.

Answer 1

[Vladimir]

попробуйте так:

<form name="myForm" action="send_my.php" method="post">
<table>
<tr>
<td><select name="num">
<option>Выбрать</option>
<option value="10">1 бонус</option>
<option value="20">2 бонуса</option>
<option value="30">3 бонуса</option>
<option value="40">4 бонуса</option>
<option value="50">5 бонусов</option>
</select></td>
<td><select name="num">
<option>Выбрать</option>
<option value="10">1 супербонус</option>
<option value="20">2 супербонуса</option>
<option value="30">3 супербонуса</option>
<option value="40">4 супербонуса</option>
<option value="50">5 супербонусов</option>
</select></td>
<td><select name="num">
<option>Выбрать</option>
<option value="10">1 мегабонус</option>
<option value="20">2 мегабонуса</option>
<option value="30">3 мегабонуса</option>
<option value="40">4 мегабонуса</option>
<option value="50">5 мегабонусов</option>
</select></td>
</tr>
</table>
</form>
<input type = "text">
<script src = "112.js"></script>

document.getElementsByTagName('input')[0].value = 100;
document.getElementsByTagName('select')[0].onchange = calculateSum;
document.getElementsByTagName('select')[1].onchange = calculateSum;
document.getElementsByTagName('select')[2].onchange = calculateSum;
function calculateSum(e)
{
	document.getElementsByTagName('input')[0].value = document.getElementsByTagName('input')[0].value * 
	Number(e.target.options[e.target.selectedIndex].value);
}

Comments

[Nikolay Matyushkin]

Благодарю Владимир! Данное решение помогло.

[Vladimir]

Удачи

Answer 2

[Stalker_RED]

Во первых я не смог реализовать механизм с несколькими select

И даже не пытались, у вас в jsfiddle один селект

Во вторых нужно работать с value option, а не с их названиями

И опять не пытались, у вас там нет value, только названия. При том что в коде, который в вопросе эти value есть.

И в третьих у меня не получилось вывести всё это в input text

И опять, у вас там нет ни одного инпута.

Comments

[Nikolay Matyushkin]

Я пробовал получать в input, но он остаётся пустым. И ваша реализация верная, но немного не та, мне нужно перемножать уже полученное число. Т.е. выбрав в 1 селекте 2 супербонуса, 100 умножилось на 20 (= 2000), и если во втором селекте выбрать, например, 3 мегабонуса, то 2000 должно умножиться на 30