Показ значений value тега input

@ericsoft · Регистрация: 24.08.2012

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

Здравствуйте, уважаемые форумчане. Взываю к вашей помощи, ибо моих знаний категорически не хватает.

Есть некая форма, ее код:

HTML5
1
2
3
4
5
6
7
<select class='class' id='f1' size="1">
<option selected="selected" value="0">&nbsp;</option>
<option value="10">Пункт1</option>
<option value="20">Пункт2</option>
<option value="30">Пункт3</option>
<option value="40">Пункт4</option>
</select>

Задача в том, чтобы вывести рядом с выпадающим списком значение выбранного поля, например, при выборе "Пункт3" рядом было написано его значение, оно у нас 30. Можно было бы вывести все это не "Пункт3", а, скажем, "Пункт3, равен 30", но нужно именно так, как я описывал.

Дальше - больше.
Следом расположены радио переключатели также со своим значением каждый. Рядом с каждым нужно вывести произведение значения выбранного пункта из select (Пункт3, например, 30) на значение выбранного radio. Как это сделать - ума не приложу, помогите, пожалуйста, хотя бы в каком направлении копать. Спасибо.

@kalabuni · 24.08.2012, 19:21

"Рядом" - понятие неопределённое и растяжимое.

Определитесь с конкретным тегом, вовнутрь которого надо вписывать значение value выбранного опшена.
Это может быть любой плайн-тег (<span>, <u>, <i>, <div>, <td>...), но имеющий конкретный уникальный id.

Например, пусть у этого тега id="rjadom"
Тогда:

HTML5
1
2
3
4
<select class="class"
        id="f1"
        size="1"
        onchange="with (this) document.getElementById ('rjadom').innerHTML = options [selectedIndex].value">

-----

По поводу радиокнопок - вы не очень внятно описали задачу.
Дайте ваш HTML-код этой группы. И не забудьте про тег(-и), который(-е) будет "рядом" с кнопкой/группой

@ericsoft · 24.08.2012, 19:31 **[ТС]**

HTML5
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Калькулятор</title>
</head>
<body>
<div>
 
<b>СФЕРА ДЕЯТЕЛЬНОСТИ КОМПАНИИ</b><br/><br/>
<select class='calculon' id='f1' size="1">
<option selected="selected" value="0">&nbsp;</option>
<option value="390">Компьютерная помощь</option>
 <option value="280">Строительные работы. Ремонт квартир и офисов.</option>
 <option value="220">Салоны красоты и spa</option>
 <option value="210">Туризм</option>
 <option value="200">Уборка квартир и офисов</option> 
 <option value="190">Машины (эвакуация, ремонт, покраска, запчасти, шины и т.д.)</option>
 <option value="180">Стоматология</option>
  <option value="150">Медицинские центры и клиники</option>
 <option value="140">Риелторские услуги</option>
<option value="250">Обучение и тренинги (Иностранные языки, Автошколы, Повышение квалификации)</option>
<option value="250">Справки (вождение, оружие и т.д.)</option>
 <option value="250">Услуги на проведение торжеств (фото и видео съемка, цветы, тамада, музыканты)</option>
 <option value="250">Ветеринарные клиники</option>
<option value="250">Мелкий ремонт: (&quot;Муж на час&quot;, &quot;Бытовая техника&quot;, &quot;Электроника&quot;)</option>
 <option value="250">Грузовые и/или пассажирские перевозки</option>
  <option value="250">Страховой бизнес</option>    
 </select>
 
</div>
 
<div>
<b>ПРИВЛЕЧЕНИЕ КЛИЕНТОВ</b><br/>
<br><b>Количество звонков:</b><br>
**<input class='calculon' id='f2' name="Group1" type="radio" value="3">от 10 до 50&nbsp;&nbsp;&nbsp;
**<input class='calculon' id='f3' name="Group1" type="radio" value="2.8">от 51 до 100&nbsp;&nbsp;&nbsp;
**<input class='calculon' id='f4' name="Group1" type="radio" value="2.5">от 101 до 200&nbsp;&nbsp;&nbsp;
  <input class='calculon' id='f5' name="Group1" type="radio" value="2.3">от 201 до 300&nbsp;&nbsp;&nbsp;
  <input class='calculon' id='f6' name="Group1" type="radio" value="2">свыше 300<br/><br/>
  </div>
 
 
<div>
<b>ТРЕНИНГИ, ДИСТАНЦИОННЫЙ И ОБЫЧНЫЙ</b><br/><br/>
<select class='calculon' id='f7' size="1">
<option selected="selected" value="0">&nbsp;</option>
 <option value="15000">Обычный</option> 
 <option value="7500">Дистанционный</option>
 </select>&nbsp;&nbsp;Тренинг по этикету телефонных переговоров<br/><br/>
 
 <select class='calculon' id='f8' size="1">
<option selected="selected" value="0">&nbsp;</option>
 <option value="15000">Обычный</option> 
 <option value="7500">Дистанционный</option>
 </select>&nbsp;&nbsp;Навыки профессионального общения по телефону<br/><br/>
 
 
 <select class='calculon' id='f9' size="1">
<option selected="selected" value="0">&nbsp;</option>
 <option value="15000">Обычный</option> 
 <option value="7500">Дистанционный</option>
 </select>&nbsp;&nbsp;Этика делового общения<br/><br/>
 
 <select class='calculon' id='f10' size="1">
<option selected="selected" value="0">&nbsp;</option>
 <option value="15000">Обычный</option> 
 <option value="7500">Дистанционный</option>
 </select>&nbsp;&nbsp;Организационное поведение<br/><br/><br/>
  </div>
 
<div>
<b>КОНСАЛТИНГ И МАРКЕТИНГОВЫЕ РЕШЕНИЯ</b><br/><br/>
<input class='calculon' id='f11' type="checkbox" value="10000">&nbsp;&nbsp;Анализ эффективности бизнеса<br/>
<input class='calculon' id='f12' type="checkbox" value="5000">&nbsp;&nbsp;Создание и анализ клиентской базы<br/>
<input class='calculon' id='f13' type="checkbox" value="10000">&nbsp;&nbsp;Разработка рекламных акций<br/>
<input class='calculon' id='f14' type="checkbox" value="10000">&nbsp;&nbsp;Разработка программ лояльности<br/>
<input class='calculon' id='f15' type="checkbox" value="5000">&nbsp;&nbsp;Работа со старой клиентской базой<br/><br/>
</div>
 
<div><b>Сумма контракта</b></div>
<div id='calculon'><b>0</b></div>
<div class="clr"></div>
<div class="div"><input type="button" value="Печать" onclick="window.print();"></div>
 
 
 
 
 
<script type="text/javascript">
if(!Number.prototype.toFixed){
**Number.prototype.toFixed=function(e){
**var y=Math.round(this*Math.pow(10,e))/Math.pow(10,e);
**var i=e-y.toString().length+y.toString().indexOf('.')+1;
**if(e>0){
**if(y.toString().indexOf('.')<0)return y+'.'+Math.pow(10,e).toString().substring(1);
**else if(i>0)return y+Math.pow(10,i).toString().substring(1);
**else return y;
**}
**else return y;
**}
}
var formula1 = '[f1]*([f2]+[f3]+[f4]+[f5]+[f6])+[f7]+[f8]+[f9]+[f10]+[f11]+[f12]+[f13]+[f14]+[f15]';
 
 
count(formula1);
 
//Сам скрипт
function count(f){form=f;calculon();}
var elems = document.getElementsByTagName('*');
for(var i=0;i<elems.length;i++){if(/(\^|\b)calculon(\$|\b)/.test(elems[i].className)){
**if(elems[i].addEventListener){elems[i].addEventListener('click',calculon,false);}else
**if(elems[i].attachEvent){elems[i].attachEvent('onclick',calculon)}
**}}
function calculon(){
**result=false;
**var els = form.match(/\[.+?\]/g);
**for(var i=0;i<els.length;i++){
**val=0;
**var obj = document.getElementById(els[i].match(/\w+/));
**if(obj.tagName=='SELECT'){
**for(var z=0;z<obj.options.length;z++){
**if(!obj.disabled&&obj.options[z].value&&obj.options[z].selected){val=val+parseFloat(obj.options[z].value)}
**}
**}else{
**if(!obj.disabled&&obj.value&&obj.selected||obj.checked){val=val+parseFloat(obj.value)}
**}
**result = result ? result.replace(els[i],val) : form.replace(els[i],val);
**}
**document.getElementById('calculon').innerHTML=eval(result).toFixed(2);
**}
</script>
 
 
</body>
</html>

вот ссылка на саму страницу.
Необходимо, чтобы в зеленом блоке (это видно на странице) выводилась стоимость звонков, как промежуточный результат, для каждого радио свой. Возможно ли это?

@kalabuni · 24.08.2012, 19:48

Народ стремительно теряет способность понимать написанный текст.
Приходится переходить к картинкам.

Смотрите миниатюру

@ericsoft · 24.08.2012, 19:57 **[ТС]**

Ок, попробуем с картинками)
На катринке показано выбранное значение поля. Именно его нужно показать в поле, где написано Вывод

Там где написано Промежуточный результат должно выводиться произведение значения выбранного поля на значение радиопереключателя.

@ericsoft · 24.08.2012, 20:04 **[ТС]**

Если можно - поподробнее, пожалуйста. Готов платить, так как своих знаний маловато, а пользоваться чужими нужно с благодарностью)

@kalabuni · 24.08.2012, 20:05

Блин, и картинки не помогают

Я уж и не знаю - КАК вам объяснить?

Конкретно для выбранной "КОМПЬЮТЕРНОЙ ПОМОЩИ" можете нарисовать конкретные буквы и цифры в конкретных местах, а?

Дайте ОДИН реальный пример того, что желаете получить.
А там уж я посмотрю код и соображу, что надо выводить конкретно для любого другого выбранного опшена.

@ericsoft · 24.08.2012, 20:15 **[ТС]**

Попробуем еще раз)

В сфере деятельности компании стоит его стоимость в значении value. Например, "Туризм" = "210"
При выборе пункта из сфер деятельности рядо с выпадающим списком должна выводиться его стоимость.

Далее, при выболе радиопереключателя с количеством звонков - они тоже имеют свое значение, под переключателями появляется промежуточный результат. Например, выбран туризм, его стоимость 210. Количество звонков выбираем от10 до 50, у них значение 3 (так легче считать), Промежуточный результат равен 630 (туризм *210* умноженный на кол-во зконков *3*)

Если я выбираю из выпадающего списка уборку (value="200") и ставлю галочку на "свыше 300" (value="2") в промежуточном он должен показывать 400, то есть 200*2.

Понимаете?)

@kalabuni · 24.08.2012, 20:29

Вам что, про КОМПЬЮТЕРНУЮ ПОМОЩЬ стыдно было написать?

Итак, пусть будет ТУРИЗМ.
Варианты:
отмечена "от 10 до 50" - пишем 210 справа от селекта (если я верно понял)
отмечена "от 51 до 100" - что пишем справа от селекта?
отмечена "от 101 до 200" - что пишем справа от селекта?
отмечена "от 201 до 300" - что пишем справа от селекта?
отмечена "свыше 300" - что пишем справа от селекта?

@ericsoft · 24.08.2012, 20:43 **[ТС]**

Хех, про компьютерную помощь было бы похоже на троллинг в мой адрес))

Не вполне верно.
При выборе туризма рядом с селектом пишется его value, то есть 210. Для стоматологии это было бы 180.
Далее, при выборе одного радио выбранный селект(в нашем случае это туризм, 210) умножается на value выбранного радио.

Механизм действия такой:
Выбираем сферу услуг (Мы остановились на туризме), справа от выпадающего списка видим его стоимость = 210. То же самое касаемо других услуг, например, уборка = 200.

Жмем нужное нам радио, пусть это будет "от 10 до 50", его value="3". Под всеми радио видим поле, в котором выводится произведение стоимости туризма (value="210") на количество звонков (value="3"), это 630.

@kalabuni · 24.08.2012, 22:15

Итак, для "туризма" базовой ценой является 210, верно я понял?

Но эту цену НИКТО и НИКОГДА не получит, потому что ПО-ЛЮБОМУ будет применяться один из "повышающих" коэффициентов - 2,3,4,5, или 6 (в зависимости от выбранного "количества звонков").
Спрашивается - а на хрена тогда эту базовую цену указывать?
-----

ИМХО, сделать надо ТАК: сразу же показывать весь спектр цен и выделять ЯРКО (в миниатюре - красным) ту цену, которая отмечена радиокнопкой.

В общем, реализую свой вариант.
На селекте у вас уже имеется уже id="f1", на всех радиокнопках - тоже, от id="f2" до id="f6", из которых выводятся "повышающие коэффициенты".

Так что от вас нужны минимальные изменения кода:
1) вместо группы радиокнопок прописать внутри "зелёного" блока таблицу из 2-х строк по 5 ячеек, прописать этой таблице id="myTBL", установить ей style="width: 100%", в ячейках первой строки - имеющиеся кнопки КАК ОНИ ЕСТЬ, во второй строке - неразрывные пробелы  
Все ячейки надо отцентрировать <td style="text-align: center">.

2) первому в коде тегу <SELECT> прописываете onchange="myFunc ()"

3) вновь прописанной таблице в "зелёном" <DIV>'е пишете onclick="myFunc ()".

Внешне должно измениться только расстояние между кнопками и нижней границей блока - оно должно чуть увеличиться.

Функция будет такой:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
function myFunc ()
{
with (document.getElementById ('f1'))
var bazCena = options [selectedIndex].value * 1;
 
var tbl = document.getElementById ('myTBL');
for (var j = 0, lj = ; j < 7; j++)
   {
   tbl.rows [1].cells [j].innerHTML = (!bazCena) ? '&nbsp;' : bazCena * (j + 2);
   tbl.rows [1].cells [j].style.color = (document.getElementById ('f' + j + 2).checked) ? 'red' : 'gray';
   }
}

@kalabuni · 24.08.2012, 22:26

В строке #10 для "надёжности" добавьте пару скобок, вот так:

tbl.rows [1].cells [j].style.color = (document.getElementById ('f' + (j + 2)).checked) ? 'red' : 'gray';

@ericsoft · 24.08.2012, 22:44 **[ТС]**

Огромное спасибо за помощь. Вы, наверное, правы, можно обойтись без вывода каждой цены в отдельности. Оказалось все немного проще, чем я рассчитывал, однако, я и до этого додуматься не смог)

@ericsoft · 27.08.2012, 00:38 **[ТС]**

Сделал немного иначе:
Слепил функцию

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
function calc() { 
           var f1 = document.getElementById("f1"); 
           var f2 = document.getElementById("f2"); 
           var f3 = document.getElementById("f3"); 
    var f4 = document.getElementById("f4"); 
    var f5 = document.getElementById("f5"); 
    var f6 = document.getElementById("f6"); 
            var result = document.getElementById("result");  
            var price = 0;
            price += parseInt(f1.options[f1.selectedIndex].value);
            price *= (f2.checked == true) ? 3 : 0 || (f3.checked == true) ? 2.8 : 0 || (f4.checked == true) ? 2.5 : 0 || (f5.checked == true) ? 2.3 : 0 || (f6.checked == true) ? 2 : 0 ; 
            result.innerHTML = (!price) ? '&nbsp;' : price.toFixed(2) ;
        }

Так как у меня не повышающий, а понижающий коэффициент - 3, 2.8 и так далее, то с value заморачиваться не стал, просто прописал фиксированные значения.

К селекту добавил

JavaScript
1
onchange="calc()"

К каждому радио добавил

JavaScript
1
onclick="calc()"

И в конце блока вставил

HTML5
1
<span id="result">&nbsp;</span> рублей.

Работает именно так, как мне и нужно было. Отдельное спасибо kalabuni за то, что натолкнул меня на верный путь. Тему можно закрывать.

Новые блоги и статьи Все статьи Все блоги /
Отправка уведомления на почту при изменении наименования справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере изменения наименования справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .	Контроль уникальности заводского номера - вариант №2 Maks 24.03.2026 В отличие от предыдущего варианта добавлено прерывание циклов, также добавлены новые переменные для сохранения контекста ошибки перед прерыванием цикла: Процедура ПередЗаписью(Отказ, РежимЗаписи,. . .
SDL3 для Desktop (MinGW): Вывод текста со шрифтом TTF с помощью библиотеки SDL3_ttf на Си и C++ 8Observer8 24.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-text-sdl3-c. zip finish-text-sdl3-cpp. zip	Жизнь в неопределённости kumehtar 23.03.2026 Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .	Модель здравоСохранения: работники работают быстрее после её введения. anaschu 23.03.2026 geJalZw1fLo Корпорация до введения программа здравоохранения имела много невыполненных работниками заданий, после введения программы количество заданий выросло. Но на выплатах по больничным это. . .	Контроль уникальности заводского номера - вариант №1 Maks 23.03.2026 Алгоритм контроля уникальности заводского (или серийного) номера на примере документа выдачи шин для спецтехники с табличной частью в конфигурации КА2. Данные берутся из регистра сведений, по. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	24.08.2012, 19:48
	Народ стремительно теряет способность понимать написанный текст. Приходится переходить к картинкам. Смотрите миниатюру Миниатюры 0

@ericsoft 0 / 0 / 0 Регистрация: 24.08.2012 Сообщений: 8
	24.08.2012, 19:57 [ТС]
	Ок, попробуем с картинками) На катринке показано выбранное значение поля. Именно его нужно показать в поле, где написано Вывод Там где написано Промежуточный результат должно выводиться произведение значения выбранного поля на значение радиопереключателя. Миниатюры 0

@ericsoft 0 / 0 / 0 Регистрация: 24.08.2012 Сообщений: 8
	24.08.2012, 20:04 [ТС]
	Если можно - поподробнее, пожалуйста. Готов платить, так как своих знаний маловато, а пользоваться чужими нужно с благодарностью) 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	24.08.2012, 20:05
	Блин, и картинки не помогают Я уж и не знаю - КАК вам объяснить? Конкретно для выбранной "КОМПЬЮТЕРНОЙ ПОМОЩИ" можете нарисовать конкретные буквы и цифры в конкретных местах, а? Дайте ОДИН реальный пример того, что желаете получить. А там уж я посмотрю код и соображу, что надо выводить конкретно для любого другого выбранного опшена. 0

@ericsoft 0 / 0 / 0 Регистрация: 24.08.2012 Сообщений: 8
	24.08.2012, 20:15 [ТС]
	Попробуем еще раз) В сфере деятельности компании стоит его стоимость в значении value. Например, "Туризм" = "210" При выборе пункта из сфер деятельности рядо с выпадающим списком должна выводиться его стоимость. Далее, при выболе радиопереключателя с количеством звонков - они тоже имеют свое значение, под переключателями появляется промежуточный результат. Например, выбран туризм, его стоимость 210. Количество звонков выбираем от10 до 50, у них значение 3 (так легче считать), Промежуточный результат равен 630 (туризм 210 умноженный на кол-во зконков 3) Если я выбираю из выпадающего списка уборку (value="200") и ставлю галочку на "свыше 300" (value="2") в промежуточном он должен показывать 400, то есть 200*2. Понимаете?) Миниатюры 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	24.08.2012, 20:29
	Вам что, про КОМПЬЮТЕРНУЮ ПОМОЩЬ стыдно было написать? Итак, пусть будет ТУРИЗМ. Варианты: отмечена "от 10 до 50" - пишем 210 справа от селекта (если я верно понял) отмечена "от 51 до 100" - что пишем справа от селекта? отмечена "от 101 до 200" - что пишем справа от селекта? отмечена "от 201 до 300" - что пишем справа от селекта? отмечена "свыше 300" - что пишем справа от селекта? 0

@ericsoft 0 / 0 / 0 Регистрация: 24.08.2012 Сообщений: 8
	24.08.2012, 20:43 [ТС]
	Хех, про компьютерную помощь было бы похоже на троллинг в мой адрес)) Не вполне верно. При выборе туризма рядом с селектом пишется его value, то есть 210. Для стоматологии это было бы 180. Далее, при выборе одного радио выбранный селект(в нашем случае это туризм, 210) умножается на value выбранного радио. Механизм действия такой: Выбираем сферу услуг (Мы остановились на туризме), справа от выпадающего списка видим его стоимость = 210. То же самое касаемо других услуг, например, уборка = 200. Жмем нужное нам радио, пусть это будет "от 10 до 50", его value="3". Под всеми радио видим поле, в котором выводится произведение стоимости туризма (value="210") на количество звонков (value="3"), это 630. Миниатюры 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	24.08.2012, 22:26
	В строке #10 для "надёжности" добавьте пару скобок, вот так: tbl.rows [1].cells [j].style.color = (document.getElementById ('f' + (j + 2)).checked) ? 'red' : 'gray'; 1

@ericsoft 0 / 0 / 0 Регистрация: 24.08.2012 Сообщений: 8
	24.08.2012, 22:44 [ТС]
	Огромное спасибо за помощь. Вы, наверное, правы, можно обойтись без вывода каждой цены в отдельности. Оказалось все немного проще, чем я рассчитывал, однако, я и до этого додуматься не смог) 0