Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Обработка числового поля

Автор: zheka1980 29.12.2014, 20:22

Господа, есть несколько полей

Код


<input type="text" name="component" value="0">

Этим полям присваивается какое-то значение типа float.

А есть еще одно поле

Код


<input type="text" name="summary" value="0">

Нужно сложить значения всех полей component и записать в поле summary. Причем по техническим причинам это нужно делать только в цикле, то есть вариант summary=component[1]+component[2]+.... не пойдет. Нужно в цикле к summary прибавалять component[i].
А поскольку поле текстовое, я вынужден каждый раз брать данные, обрабатывать их функцией Number, затем складывать, затем записывать.

Код


for (i=0; i<$('.field').size(); i++) 
                {
                 document.getElementsByName('summary')[0].value=Number(document.getElementsByName('summary')[0].value)+Number(document.getElementsByName('component'));

                }

Работает, но меня не покидает ощущение, что я нагородил чего-то. Нельзя ли как-то проще? МОжно ли сразу input придать только цифровой тип? Я натыкался на информацию о такой возможности, но пишут, то вроде бы не все браузеры подерживают.

Автор: sQu1rr 29.12.2014, 23:24

Цитата(zheka1980 @ 29.12.2014, 17:22

)

не покидает ощущение, что я нагородил чего-то

Да вроде все верно.
Только вместо Number() я бы использовал parseFloat() ну и DOM лишний раз трогать не стоит. Создайте временную переменную, туда считайте результат, а потом ее запишите в DOM.
Ну и разумеется все getElementBy нужно во временную переменную, что бы каждый раз не искать, то же самое и с $('.field').size(). Да и если используете jquery что вам мешает написать $('...').get(i).value??

Добавлено через 7 минут и 31 секунду
Что-то вроде (НЕ ПРОВЕРЯЛ, считайте что это псевдокод)

Код


var summary = 0;
$('.field').each(function() {
    summary += parseFloat($(this).find("[name='component']").val());
});
$("[name='summary']").val(summary);

Автор: zheka1980 30.12.2014, 04:37

Цитата

Да и если используете jquery что вам мешает написать $('...').get(i).value??

Вместо чего? В приведенном вами примере данной конструкции не увидел.

Я только начал вникать в jquery

Неужели это операция присваивания?

Цитата

$("[name='summary']").val(summary);

Автор: Aliance 30.12.2014, 08:35

Цитата(zheka1980 @ 30.12.2014, 05:37

)

Вместо чего?

имелось ввиду, раз уже у вас подключена библиотека jQuery, то разумнее все выборки делать в ней (вместо вашего варианта с getElementsByName).

Цитата(zheka1980 @ 30.12.2014, 05:37

)

Неужели это операция присваивания?

Да. http://api.jquery.com/val/

Только я бы не рекомендовал делать выборку по атрибуту там, где этого можно не делать - все же она не самая быстрая.

Код


$('.field').each(function() {
    $(this).find("[name='component']").val()
});
// можно заменить на
$('input.component').each(function() {
    $(this).val()
});
// добавив полям class="component"

PS: в HTML5 атрибут name помечен как deprecated, рекомендуется использовать id. Да и выборки по нему быстрее.

Автор: sQu1rr 30.12.2014, 12:19

Цитата(Aliance @ 30.12.2014, 05:35

)

атрибут name помечен как deprecated

wut? только в <img> насколько я знаю, может еще где, но точно не в <input>.

Цитата(zheka1980 @ 30.12.2014, 01:37

)

Вместо чего?

Код


document.getElementsByName('component')[i] // который у вас написан неправильно

А вообще, да, не нужно придумывать велосипеды, и просто

Код


var summary = 0;
$('input.component').each(function() {
    summary += parseFloat( $(this).val() );
});
// добавив полям class="component"
$("#summary").val(summary); // предпологаем что summary это id, так как summary только один

как сказал мр. Aliance

Цитата(zheka1980 @ 30.12.2014, 01:37

)

Я только начал вникать в jquery

http://api.jquery.com/ - изучайте smile

Автор: Aliance 30.12.2014, 12:24

Цитата(sQu1rr @ 30.12.2014, 13:19

)

wut? только в <img> насколько я знаю, может еще где, но точно не в <input>.

Цитата

Note: In HTML5, the "name" attribute is deprecated and has been replaced by the "id" attribute for many elements. Use the document.getElementById() method where it is appropriate. Also look at the getElementsByClassName() and getElementsByTagName() methods.

© http://www.w3schools.com/jsref/met_doc_getelementsbyname.asp

Добавлено через 3 минуты и 36 секунд
Да, текстовых полей это не касается

Цитата

11.2 Non-conforming features

Elements in the following list are entirely obsolete, and must not be used by authors:

name on a elements (except as noted in the previous section)
name on embed elements
name on img elements
name on option elements
Use the id attribute instead.

Автор: zheka1980 2.1.2015, 14:38

Все получилось. Спасибо.
Осталась одна деталь, не могу никак правильно написать (какой-то синтаксис Jquery для меня вычурный, если честно)

Вот так я получал номер инпута, в котором возникло событие select библиотеки autocomplete:

Код


...
select: function(event, ui) 
           { 
             var element_index=$('.search').index(this);// ПОЛУЧИЛИ НОМЕР
             elem_ing_caloric=document.getElementsByName('ing_caloric'); // получили ссылку на INPUT в который нужно записать данные
             elem_ing_caloric[element_index].value=ui.item.caloric; // Записали данные

Так вот как мне теперь, минуя обращение к DOM средставми JavaScript присвоить значение инпуту?
Я заменил в инпуте nаmе=ing_caloric на class=ing_caloric и сделал так:

Код


$('.ing_caloric').eq('.search').index(this).val(ui.item.caloric);

Где-то ошибка...

Автор: Aliance 11.1.2015, 10:24

Цитата(zheka1980 @ 2.1.2015, 15:38

)

$('.ing_caloric').eq('.search').index(this).val(ui.item.caloric);

вообще сплошная ошибка. опишите словами чего вы хотите добиться. а еще лучше с примером разметки на jsfiddle