Много форм, один обработчик

@alex380 · Регистрация: 27.11.2015

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

Люди добрые помогите! Почему скрипт:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
 
function calc(par){
type = document.cl_form.type.value;
amount = document.cl_form.amount.value;
amount2 = document.cl_form.amount2.value;
 
//var summ;
summ = Number(type) * Number(amount) + Number(amount2);
document.cl_form.summ.value=summ;
 
return false;
}
</script>

Работает только с одной формой:

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
<form name="cl_form">
<p>
<select name="type" id="type" onchange="calc(this.value);">
<option selected value="5500">Дуб</option>
<option value="5300">Ясень</option>
<option value="4900">Бук</option>
<option value="4700">Лиственница</option>
<option value="4500">Берёза</option>
<option value="4300">Кедр</option>
</select>
</p>
<p>
<select name="amount" id="amount" onchange="calc(this.value);">
<option selected value="1">300*400</option>
<option value="1.33">400*500</option>
<option value="1.78">500*600</option>
</select>
</p>
<p>
<select name="amount2" id="amount2" onchange="calc(this.value);">
<option selected="selected" value="0">Нет</option>
<option value="700">Да</option>
</select>
</p>
 
<p>
<input value="5500" name="summ" readonly="readonly" maxlength="10" size="5" type="text">
</p>
</form>

Добавляю вторую, точно такую же и всё перестаёт работать.

@Almag13 · 27.11.2015, 21:20

на одной странице?
Потому что берутся данные из первой формы, нужно проходить each если по jQuery или же через цикл

@alex380 · 27.11.2015, 21:26 **[ТС]**

Формы на одной странице, их может быть очень много и они одинаковые. Спасибо конечно за совет, только я не чего не понял, php и jQuery я не знаю

@Almag13 · 27.11.2015, 23:41

Нужно пройти each по формам и каждой форме через $(this) добавлять свои параметры

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
 
function calc(par){
 
var type, amount , amount2,summ;
 
$('.cl_form').each(function(){
 
 type= $(this).find('.type').val(); 
 amount = $(this).find('.amount').val();
 amount2 = $(this).find('.amount2').val();
 summ = type * amount  + amount2 ;
$(this).find('input[name="summ"]').val(summ);
 
});
}
</script>

Пишем через класс не через id - id один на странице только возможен, возможно еще по этому не работал код
вместо id класс поставить ну и обратиться к классу не к id

HTML5
1
<select name="amount" class="amount" onchange="calc(this.value);">

@alex380 · 28.11.2015, 11:54 **[ТС]**

Посмотрите пожалуйста, что я сделал не так. Изменил id на class и всё перестало работать.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    <script>
 
        function calc(par){
         
        var type, amount , amount2,summ;
         
        $('.cl_form').each(function(){
         
         type= $(this).find('.type').val(); 
         amount = $(this).find('.amount').val();
         amount2 = $(this).find('.amount2').val();
         summ = type * amount  + amount2 ;
        $(this).find('input[name="summ"]').val(summ);
         
        });
        }
    </script>

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
</head>
<body>
    <form name="cl_form">   
        <p> 
            <select name="type" class="type" onchange="calc(this.value);">
            <option selected value="5500">Дуб</option>
            <option value="5300">Ясень</option>
            <option value="4900">Бук</option>
            <option value="4700">Лиственница</option>
            <option value="4500">Берёза</option>
            <option value="4300">Кедр</option>   
            </select>
        </p>
        <p> 
            <select name="amount" class="amount" onchange="calc(this.value);"> 
            <option selected value="1">300*400</option>
            <option value="1.33">400*500</option>
            <option value="1.78">500*600</option>
            </select>
        </p>
        <p> 
            <select name="amount2" class="amount2" onchange="calc(this.value);"> 
            <option selected="selected" value="0">Нет</option>
            <option value="700">Да</option>
            </select>
        </p>
        
        <p> 
            <input value="5500" name="summ" readonly="readonly" maxlength="10" size="5" type="text">
        </p>
    </form>

@Almag13 · 28.11.2015, 18:11

У вас обработчик onchange и обработка функции установлена в html

Как вариант рассчитывать в jQuery
На скорую руку:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function changeEl (){
    var type, amount , amount2,summ;
    $('form select').each(function(){
        
        $(this).change(function(){            
   type= $(this).closest('form').find('.type').val(); 
   amount = $(this).closest('form').find('.amount').val();
   amount2 = $(this).closest('form').find('.amount2').val();
   summ = parseInt(type) * parseInt(amount) + parseInt(amount2) ;
            $(this).closest('form').find('input[name="summ"]').val(summ);
        });
    });
    
}
 
changeEl ();

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
<form name="cl_form">   
        <p> 
            <select name="type" class="type">
            <option selected value="5500">Дуб</option>
            <option value="5300">Ясень</option>
            <option value="4900">Бук</option>
            <option value="4700">Лиственница</option>
            <option value="4500">Берёза</option>
            <option value="4300">Кедр</option>   
            </select>
        </p>
        <p> 
            <select name="amount" class="amount"> 
            <option selected value="1">300*400</option>
            <option value="1.33">400*500</option>
            <option value="1.78">500*600</option>
            </select>
        </p>
        <p> 
            <select name="amount2" class="amount2"> 
            <option selected="selected" value="0">Нет</option>
            <option value="700">Да</option>
            </select>
        </p>
        
        <p> 
            <input value="5500" name="summ" readonly="readonly" maxlength="10" size="5" type="text">
        </p>
    </form>

Теперь нужно через each каждую форму обойти и вывести через this

@alex380 · 29.11.2015, 11:33 **[ТС]**

Что значит:через each каждую форму обойти и вывести через this?

@fanatikus · 29.11.2015, 17:08

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

Теперь нужно через each каждую форму

а
а где, вы видите несколько форм? я вижу одну.

@alex380 · 29.11.2015, 17:19 **[ТС]**

форм будет несколько и они все одинаковые..

@fanatikus · 29.11.2015, 18:03

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

форм будет несколько и они все одинаковые..

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

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

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
<form name="cl_form">
    <p>
        <select data-n="cl_form" class="sel" name="type" id="type">
            <option selected value="5500">Дуб</option>
            <option value="5300">Ясень</option>
            <option value="4900">Бук</option>
            <option value="4700">Лиственница</option>
            <option value="4500">Берёза</option>
            <option value="4300">Кедр</option>
        </select>
    </p>
    <p>
        <select data-n="cl_form" class="sel" name="amount" id="amount">
            <option selected value="1">300*400</option>
            <option value="1.33">400*500</option>
            <option value="1.78">500*600</option>
        </select>
    </p>
    <p>
        <select data-n="cl_form" class="sel" name="amount2" id="amount2">
            <option selected="selected" value="0">Нет</option>
            <option value="700">Да</option>
        </select>
    </p>
 
    <p>
        <input id="cl_form"  name="summ" readonly="readonly" maxlength="10" size="5" type="text">
    </p>
</form>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
$(document).ready(function(){
    $('.sel').change(function(){
        var f = $(this).attr('data-n');
        var ar = $('form[name='+f+']').serializeArray();
        var summa = 1; 
        $(ar).each(function(i,e){
          if(e.name !== 'summ')
          {
              summa *= e.value;
          }
            $('#'+f).val(summa);
        })
    })
})
</script>

@alex380 · 29.11.2015, 18:26 **[ТС]**

Мне нужна куча одинаковых форм и что бы они работали с примерно таким скриптом

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
 
function calc(par){
type = document.cl_form.type.value;
amount = document.cl_form.amount.value;
amount2 = document.cl_form.amount2.value;
 
//var summ;
summ = Number(type) * Number(amount) + Number(amount2);
document.cl_form.summ.value=summ;
 
return false;
}
</script>

Конкретно с этим скриптом работает только одна форма.

@fanatikus · 29.11.2015, 18:32

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

наверно, все таки, имена форм, значения, атрибуты будут разные.

а как насчет этого? или формы все-же идентичны?

@alex380 · 30.11.2015, 10:58 **[ТС]**

идентичны

Добавлено через 10 часов 0 минут
Almag13, А можно все эту процедуру через php проделать?

Добавлено через 5 часов 54 минуты
Сделал отдельный файл скрипта

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function changeEl (){
    var type, amount , amount2,summ;
    $('form select').each(function(){
        
        $(this).change(function(){            
   type= $(this).closest('form').find('.type').val(); 
   amount = $(this).closest('form').find('.amount').val();
   amount2 = $(this).closest('form').find('.amount2').val();
   summ = parseInt(type) * parseInt(amount) + parseInt(amount2) ;
            $(this).closest('form').find('input[name="summ"]').val(summ);
        });
    });
    
}
 
changeEl ();

И всё заработало, все формы вычисляются, только одна проблема, умножаются только целые числа. Почему?

Добавлено через 11 минут
С проблемой целых чисел то же разобрался, поменял parseInt на parseFloat. Большое спасибо за помощь!!

Новые блоги и статьи Все статьи Все блоги /
Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.
Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .

@Almag13 27 / 28 / 16 Регистрация: 18.10.2015 Сообщений: 187
	27.11.2015, 21:20
	на одной странице? Потому что берутся данные из первой формы, нужно проходить each если по jQuery или же через цикл 1

@alex380 0 / 0 / 0 Регистрация: 27.11.2015 Сообщений: 109
	27.11.2015, 21:26 [ТС]
	Формы на одной странице, их может быть очень много и они одинаковые. Спасибо конечно за совет, только я не чего не понял, php и jQuery я не знаю 0

@alex380 0 / 0 / 0 Регистрация: 27.11.2015 Сообщений: 109
	29.11.2015, 11:33 [ТС]
	Что значит:через each каждую форму обойти и вывести через this? 0

@alex380 0 / 0 / 0 Регистрация: 27.11.2015 Сообщений: 109
	29.11.2015, 17:19 [ТС]
	форм будет несколько и они все одинаковые.. 0