Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 27.11.2015
Сообщений: 109
1

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

27.11.2015, 19:09. Просмотров 1045. Ответов 12
Метки нет (Все метки)

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

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>
Добавляю вторую, точно такую же и всё перестаёт работать.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
27.11.2015, 19:09
Ответы с готовыми решениями:

Много одинаковых форм
Всем привет! Пытаюсь сделать удаление личных сообщений используя ajax jquery. Личные сообщения...

не понятный обработчик форм Core.Form.js
есть участок кода который отправляет форму через аякс: (условно говоря) ...

javascript две кнопки и один обработчик
Есть один обработчик Proverka2() и две кнопки url и url_ftp. Как сделать так, что бы в зависимости...

Как назначить один обработчик для всех элементов
На странице есть множество HTML элементов, для каждого из которых заданы аттрибуты: ...id=&quot;el_1&quot;...

12
27 / 28 / 15
Регистрация: 18.10.2015
Сообщений: 187
27.11.2015, 21:20 2
на одной странице?
Потому что берутся данные из первой формы, нужно проходить each если по jQuery или же через цикл
1
0 / 0 / 0
Регистрация: 27.11.2015
Сообщений: 109
27.11.2015, 21:26  [ТС] 3
Формы на одной странице, их может быть очень много и они одинаковые. Спасибо конечно за совет, только я не чего не понял, php и jQuery я не знаю
0
27 / 28 / 15
Регистрация: 18.10.2015
Сообщений: 187
27.11.2015, 23:41 4
Нужно пройти 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);">
1
0 / 0 / 0
Регистрация: 27.11.2015
Сообщений: 109
28.11.2015, 11:54  [ТС] 5
Посмотрите пожалуйста, что я сделал не так. Изменил 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>
0
27 / 28 / 15
Регистрация: 18.10.2015
Сообщений: 187
28.11.2015, 18:11 6
У вас обработчик 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
1
0 / 0 / 0
Регистрация: 27.11.2015
Сообщений: 109
29.11.2015, 11:33  [ТС] 7
Что значит:через each каждую форму обойти и вывести через this?
0
1713 / 1365 / 636
Регистрация: 17.11.2012
Сообщений: 6,012
29.11.2015, 17:08 8
Цитата Сообщение от Almag13 Посмотреть сообщение
Теперь нужно через each каждую форму
а
а где, вы видите несколько форм? я вижу одну.
0
0 / 0 / 0
Регистрация: 27.11.2015
Сообщений: 109
29.11.2015, 17:19  [ТС] 9
форм будет несколько и они все одинаковые..
0
1713 / 1365 / 636
Регистрация: 17.11.2012
Сообщений: 6,012
29.11.2015, 18:03 10
Цитата Сообщение от 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>
0
0 / 0 / 0
Регистрация: 27.11.2015
Сообщений: 109
29.11.2015, 18:26  [ТС] 11
Мне нужна куча одинаковых форм и что бы они работали с примерно таким скриптом
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>
Конкретно с этим скриптом работает только одна форма.
0
1713 / 1365 / 636
Регистрация: 17.11.2012
Сообщений: 6,012
29.11.2015, 18:32 12
Цитата Сообщение от fanatikus Посмотреть сообщение
наверно, все таки, имена форм, значения, атрибуты будут разные.
а как насчет этого? или формы все-же идентичны?
0
0 / 0 / 0
Регистрация: 27.11.2015
Сообщений: 109
30.11.2015, 10:58  [ТС] 13
идентичны

Добавлено через 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. Большое спасибо за помощь!!
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
30.11.2015, 10:58

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Отправка данных из трёх форм на один url
Есть форма 1 с полями A и B, форма 2 с полями C и D, кнопка отправить находится вне этих форм, у...

Один файл js для обработки нескольких форм
Добрый день. Есть один файл js, в котором обрабатываются несколько страниц сайта. Есть две...

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

Много кнопок и один обработчик событий
Есть ли какой-то способ одним обработчиком событий воздействовать на множество кнопок, находящихся...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
13
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.