Создать страницу с формой и сценарием расчёта стоимости услуг.

@Drift135 · Регистрация: 14.10.2020

Студворк — интернет-сервис помощи студентам

Фирма предоставляет в аренду автомобили Создать документ с формой в которую клиент вводит кол во часов и сценарием
вычисляющим стоимость заказа Цена часа задана в документе

@amr-now · 04.02.2021, 08:42

Если ширина полей одинаковая и фиксированная, то стили простые.
Если ширина полей разная, метку и поле часто помещают в дополнительный контейнер.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        form {
            width: fit-content;
            border: 1px solid black;
            padding: 0.5em;
        }
 
        div.caption {
            font-weight: bold;
            text-align: center;
            margin-bottom: 0.5em;
        }
 
        label {
            display: inline-block;
            width: 150px;
        }
 
        input[type="text"] {
            width: 50px;
            text-align: right;
            margin-bottom: 0.5em;
        }
 
        input[disabled] {
            color: black;
        }
 
        input[type="submit"] {
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>
    <form>
        <div class="caption">Аренда автомобиля</div>
        <label>Цена часа: </label><input type="text" name="price" value="50" disabled><br>
        <label>Количество часов:</label><input type="text" name="count"><br>
        <label>Стоимость заказа:</label><input type="text" name="total" disabled><br>
        <input type="submit" value="Отправить">
    </form>
    <script>
        let form = document.forms[0];
        form.count.onblur = count_blur;
 
        function count_blur() {
            let price = +form.price.value;
            let count = +this.value;
            let total = price * count;
            form.total.value = total;
        }
    </script>
</body>
</html>

@Mr_Sergo · 04.02.2021, 08:56

Drift135,

https://codepen.io/Mr_Sergo/pe... itors=1010

HTML5
1
2
3
4
5
<form>
  <input type="number" min="0" name="num">
</form>
 
<div id="out"></div>

JavaScript
1
2
3
4
5
6
let cnt = 5
let out = document.querySelector('#out')
 
document.querySelector('form').num.oninput = function () {
  out.textContent = +this.value * cnt
}

@amr-now · 04.02.2021, 09:00

Mr_Sergo, снаружи от формы выводить неинтересно.
Предполагается, что мы какие-нибудь числа отправим на сервер. Их логичнее отправить из формы.

@Mr_Sergo · 04.02.2021, 09:19

Не по теме:

Mr_Sergo утвердительно кивнул

Добавлено через 12 минут

Сообщение от amr-now

снаружи от формы выводить неинтересно

я как всегда не так понял задачу...

Добавлено через 27 секунд
amr-now, а почему по блур а не по инпуту у вас?

@amr-now · 04.02.2021, 09:41

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

почему по блур а не по инпуту у вас?

Расчет не по каждому изменению символа, а по выходу из поля.

@Mr_Sergo · 04.02.2021, 11:26

----------

Тада так -> http://f0510355.xsph.ru/rent_auto/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form action="test.php" method="POST" name="rent_form" >
  <div class="title">Аренда автомобиля</div>
  <div class="wrapper-input">
    <div class="div-for-input">
      <label for="price_hour">Цена за час:</label><br>
      <input type="text" name="price_hour" id="price_hour" class="rent_input" value="70" disabled>
    </div>
    <div class="div-for-input">
      <label for="count_hour">Количество часов:</label><br>
      <input type="text" name="count_hour" id="count_hour" autocomplete="off" class="rent_input" required>
    </div>
    <div class="div-for-input">
      <label for="total">Итого:</label><br>
      <input type="text" name="total" id="total" class="rent_input" disabled>
    </div>
    <button type="submit" class="rent_submit">Отправить</button>
  </div>
</form>

JavaScript
1
2
3
4
rent_form.count_hour.oninput = function () {
  this.value = this.value.replace(/\D/g,'')
  rent_form.total.value = this.value * +price_hour.value || ''
}

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
body, html {
  width: 100%;
  height: 100%;
  margin:0;
  padding:0;
  font-family: sans-serif;
  background: linear-gradient(#141e30, #243b55);
}
 
form[name="rent_form"] {
  width: 340px;
  height: 370px;
  background: #243b55;
  margin: 50px auto 0px auto;
  box-shadow: 0 15px 25px rgb(0 0 0 / 60%);
  border-radius: 10px;
  padding: 20px;
}
 
.title {
  width: fit-content;
  color: wheat;
  margin: 0px auto 0px auto;
  font-size: 25px;
  letter-spacing: 2px;
}
 
.wrapper-input {
  width: 300px;
  margin: 0px auto;
}
 
.div-for-input {
  width: 100%;
  height: fit-content;
  margin: 30px 0px 0px 0px;
}
 
.div-for-input label {
  color: white;
  letter-spacing: 1px;
}
 
.rent_input {
  width: 100%;
  background: #66339900;
  border: 0px;
  border-bottom: 1px solid white;
  padding: 5px;
  color: wheat;
  font-size: 22px;
  letter-spacing: 2px;
}
 
.rent_input:focus {
  outline: navajowhite;
  border-bottom: 1px solid rgb(0 226 255);
}
 
.rent_submit {
  width: 60%;
  height: 50px;
  margin: 30px auto 0px auto;
  background: #673ab700;
  border: 0px;
  border-bottom: 1px solid white;
  color: wheat;
  font-size: 20px;
  letter-spacing: 2px;
  cursor: pointer;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  outline: none;
  border-radius: 5px 5px 0px 0px;
}
 
.rent_submit:hover {
  background: #ffffff0d;
}

Добавлено через 1 минуту

Сообщение от amr-now

Расчет не по каждому изменению символа

а у меня по каждому пусть будет

Добавлено через 2 минуты
можно было еще прикольных анимах добавить но лень заморачиваться

Добавлено через 8 минут

Сообщение от amr-now

Mr_Sergo, снаружи от формы выводить неинтересно.
Предполагается, что мы какие-нибудь числа отправим на сервер. Их логичнее отправить из формы.

только вот у вас отправляется всего лишь одно поле name="count"

потому что остальные инпуты = disabled

Добавлено через 1 минуту
собственно как и у меня теперь... если что скажем что расчеты для сервера должны производится на сервере а то мало ли что там юзер наменяет в форме

@amr-now · 04.02.2021, 11:46

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

только вот у вас отправляется всего лишь одно поле name="count" потому что остальные инпуты = disabled

Задачи сделать обработчик события submit в данной теме нет.
В обработчике всё можно настроить и отправить в лучшем виде.
Плюс можно и в HTML выставить readonly. Тоже в данной теме акцент на этом не делается.

@Mr_Sergo · 04.02.2021, 11:51

Не по теме:

Сообщение от amr-now

снаружи от формы выводить неинтересно.
Предполагается, что мы какие-нибудь числа отправим на сервер

аа понятно то есть это не ваши слова ну ок

@amr-now · 04.02.2021, 11:53

Ребята в комментах тоже так делали. Так что нас мух много )))))))))
http://htmlbook.ru/html/input/readonly

@Mr_Sergo · 04.02.2021, 11:54

Не по теме:

Вы говорите мне что наружу результат неинтересно выводить потому что данные должны отправляться на сервер а сами эти данные не отправляете :) смысл?

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@Drift135 0 / 0 / 0 Регистрация: 14.10.2020 Сообщений: 96

	Создать страницу с формой и сценарием расчёта стоимости услуг. 04.02.2021, 07:01. Показов 2102. Ответов 10 Метки нет (Все метки) Фирма предоставляет в аренду автомобили Создать документ с формой в которую клиент вводит кол во часов и сценарием вычисляющим стоимость заказа Цена часа задана в документе 0

@amr-now 6497 / 3908 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	04.02.2021, 09:00
	Mr_Sergo, снаружи от формы выводить неинтересно. Предполагается, что мы какие-нибудь числа отправим на сервер. Их логичнее отправить из формы. 0

@amr-now 6497 / 3908 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	04.02.2021, 11:53
	Ребята в комментах тоже так делали. Так что нас мух много ))))))))) http://htmlbook.ru/html/input/readonly 0

@Mr_Sergo
	04.02.2021, 11:54
	Не по теме: Вы говорите мне что наружу результат неинтересно выводить потому что данные должны отправляться на сервер а сами эти данные не отправляете :) смысл? 0

Создать страницу с формой и сценарием расчёта стоимости услуг.

Решение

Решение