Форум

WebMachine · #1 (**permalink**) 09.02.2023, 13:07

Есть форма с select'ами и прочими полями:

<form action="#" id="calc">
<select name="price1" id="adults">
	<option value="0">Кол-во взрослых</option>
	<option value="250">2</option>
	<option value="500">3</option>
	<option value="750">4</option>
</select>

<select name="price2" id="kids">
	<option value="0">Кол-во детей</option>
	<option value="250">2</option>
	<option value="500">3</option>
	<option value="750">4</option>
</select>

<h2>Кол-во посещений:</h2>
<div class="check-radio">
  <input type="radio" name="price3" value="200">
  <label>1</label>
</div>

<div class="check-radio">
  <input type="radio" name="price3" value="400">
  <label>2</label>
</div>

Итого: на <font id="persons"></font> людей, <font id="visits"></font> посещений, будет стоить: <output name="o" for="a b c d e f g">0</output> рублей.
</form>

Задача:
Как вывести в "Итого" значения:
- сложенных названий option в id="persons"
- сложенных названий label в id="visits"
- сложенные value любых полей в id="cost"

Пока что есть скрипт для сложения всех value но в тег <output> хотелось бы с помощью <font id="cost"></font> выводить

в процессе: https://jsfiddle.net/Georka/b8ps3uh9/3/

voraa · #2 (**permalink**) 09.02.2023, 14:53

Почему <font>? Чем <span> плох?

document.getElementById('persons').textContent = persons;

Что такое for="a b c d e f g"? В for должны быть id элементов от которых зависит выводимое значение. Но особого смысла это не имеет - это только подсказка для скриптов, по каким значениям считать. Но считать должен скрипт. Само считаться ничего не будет.

рони · #3 (**permalink**) 09.02.2023, 15:02

WebMachine,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script>
        window.addEventListener('DOMContentLoaded', function() {
            var form = document.querySelector('#calc'),
                output = form.querySelector('output');

            function total() {
                var mens_price = +adults.value;
                var children_price = +kids.value;
                var day_price = +form.querySelector('[name^="price"]:checked').value;
                var sum = mens_price + children_price + day_price;
                output.innerHTML = sum;
                var num = (+adults.selectedOptions[0].text || 0) + (+kids.selectedOptions[0].text || 0)
                persons.textContent = num;
                var day = form.querySelector('[name^="price"]:checked').nextElementSibling.textContent;
                visits.textContent = day;
            }
            form.addEventListener('change', total);
            form.addEventListener('input', total);
        });
    </script>
</head>

<body>
    <form action="#" id="calc">
        <select name="price1" id="adults">
    <option value="0">Кол-во взрослых</option>
    <option value="250">2</option>
    <option value="500">3</option>
    <option value="750">4</option>
</select>
        <select name="price2" id="kids">
    <option value="0">Кол-во детей</option>
    <option value="250">2</option>
    <option value="500">3</option>
    <option value="750">4</option>
</select>
        <h2>Кол-во посещений:</h2>
        <div class="check-radio">
            <input type="radio" name="price3" value="200" checked="checked">
            <label>1</label>
        </div>
        <div class="check-radio">
            <input type="radio" name="price3" value="400">
            <label>2</label>
        </div>
        <br> Итого: на
        <font id="persons"></font> людей,
        <font id="visits"></font> посещений, будет стоить: <output name="o" for="a b c d e f g">0</output> рублей.
    </form>
</body>

</html>

WebMachine · #4 (**permalink**) 09.02.2023, 15:09

Сообщение от рони

КОД

Всё просто идеально ) , только можно вместо output выводить итоговую сумму также с помощью id ?

рони · #5 (**permalink**) 09.02.2023, 15:18

Сообщение от WebMachine

только можно вместо output выводить итоговую сумму также с помощью id ?

так добавьте id.

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script>
        window.addEventListener('DOMContentLoaded', function() {
            var form = document.querySelector('#calc');

            function total() {
                var mens_price = +adults.value;
                var children_price = +kids.value;
                var day_price = +form.querySelector('[name^="price"]:checked').value;
                var sum = mens_price + children_price + day_price;
                all_price.innerHTML = sum;
                var num = (+adults.selectedOptions[0].text || 0) + (+kids.selectedOptions[0].text || 0)
                persons.textContent = num;
                var day = form.querySelector('[name^="price"]:checked').nextElementSibling.textContent;
                visits.textContent = day;
            }
            form.addEventListener('change', total);
            form.addEventListener('input', total);
        });
    </script>
</head>

<body>
    <form action="#" id="calc">
        <select name="price1" id="adults">
    <option value="0">Кол-во взрослых</option>
    <option value="250">2</option>
    <option value="500">3</option>
    <option value="750">4</option>
</select>
        <select name="price2" id="kids">
    <option value="0">Кол-во детей</option>
    <option value="250">2</option>
    <option value="500">3</option>
    <option value="750">4</option>
</select>
        <h2>Кол-во посещений:</h2>
        <div class="check-radio">
            <input type="radio" name="price3" value="200" checked="checked">
            <label>1</label>
        </div>
        <div class="check-radio">
            <input type="radio" name="price3" value="400">
            <label>2</label>
        </div>
        <br> Итого: на
        <font id="persons"></font> людей,
        <font id="visits"></font> посещений, будет стоить: <output name="o" for="a b c d e f g" id='all_price'>0</output> рублей.
    </form>
</body>

</html>

WebMachine · #6 (**permalink**) 09.02.2023, 20:11

Сообщение от рони

так добавьте id

Рони спасибо )

Форум

Справочник

Discord чат

Курсы javascript