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

@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. Большое спасибо за помощь!!

Новые блоги и статьи Все статьи Все блоги /
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. 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 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

@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