Показ значений 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 за то, что натолкнул меня на верный путь. Тему можно закрывать.

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@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