Javascript-форум - Сумма полей должна быть равна 100, проверка

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Сумма полей должна быть равна 100, проверка (https://javascript.ru/forum/events/58652-summa-polejj-dolzhna-byt-ravna-100-proverka.html)

lolpops

02.10.2015 17:37

Сумма полей должна быть равна 100, проверка

Здравствуйте! Есть задача в списке инпутов проверить сумму всех полей. Необходимо чтобы если пользователь вводит цифры и сумма не равна 100 то поля подсвечивалась красным например, подскажите как реализовать!
Код полей такой:

<div class="poisk2" align="right">
<u>Процент использования</u><br>
Закладки            <input type="number" name="check[0]" id="check-0" min="0" max="100" value="30"> %<br />
Yandex.ru           <input type="number" name="check[1]" id="check-1" min="0" max="100" value="40"> %<br />
Google.ru           <input type="number" name="check[2]" id="check-2" min="0" max="100" value="20"> %<br />
Nigma .ru           <input type="number" name="check[3]" id="check-3" min="0" max="100" value="10"> %<br />
Qip.ru              <input type="number" name="check[4]" id="check-4" min="0" max="100" value="0"> %<br />
Go.mail.ru          <input type="number" name="check[5]" id="check-5" min="0" max="100" value="0"> %<br />
Rambler.ru          <input type="number" name="check[6]" id="check-6" min="0" max="100" value="0"> %<br />
Google.com.ua       <input type="number" name="check[7]" id="check-7" min="0" max="100" value="0"> %<br />
Meta.ua             <input type="number" name="check[8]" id="check-8" min="0" max="100" value="0"> %<br />
Yandex.ua           <input type="number" name="check[9]" id="check-9" min="0" max="100" value="0"> %<br />
Bigmir.net          <input type="number" name="check[10]" id="check-10" min="0" max="100" value="0"> %<br />
Bing.com            <input type="number" name="check[11]" id="check-11" min="0" max="100" value="0"> %<br />
Yandex.com          <input type="number" name="check[12]" id="check-12" min="0" max="100" value="0"> %<br />
</div>

Пробовал так, но нужно привязаться к конкретному виду полей (т.к. есть и другие разновидности), + нужно как то задать стиль подсветки..

var s = 0;
      
      $(document).ready(function() {
	$.each($('input'), function(key, val) {
	  s = s + parseInt(val.value);
	});

	alert(s);
      });

Заранее спасибо.

Decode

02.10.2015 18:29

lolpops, так?

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <div class="poisk2" align="right">
    <u>Процент использования</u><br>
    Закладки <input type="number" name="check[0]" id="check-0" min="0" max="100" value="30"> %<br />
    Yandex.ru <input type="number" name="check[1]" id="check-1" min="0" max="100" value="40"> %<br />
    Google.ru <input type="number" name="check[2]" id="check-2" min="0" max="100" value="20"> %<br />
    Nigma.ru <input type="number" name="check[3]" id="check-3" min="0" max="100" value="10"> %<br />
    Qip.ru <input type="number" name="check[4]" id="check-4" min="0" max="100" value="0"> %<br />
    Go.mail.ru <input type="number" name="check[5]" id="check-5" min="0" max="100" value="0"> %<br />
    Rambler.ru <input type="number" name="check[6]" id="check-6" min="0" max="100" value="0"> %<br />
    Google.com.ua <input type="number" name="check[7]" id="check-7" min="0" max="100" value="0"> %<br />
    Meta.ua <input type="number" name="check[8]" id="check-8" min="0" max="100" value="0"> %<br />
    Yandex.ua <input type="number" name="check[9]" id="check-9" min="0" max="100" value="0"> %<br />
    Bigmir.net <input type="number" name="check[10]" id="check-10" min="0" max="100" value="0"> %<br />
    Bing.com<input type="number" name="check[11]" id="check-11" min="0" max="100" value="0"> %<br />
    Yandex.com <input type="number" name="check[12]" id="check-12" min="0" max="100" value="0"> %<br />
  </div>

  <script>
    var wrap = document.querySelector('.poisk2'),
        inpElems = wrap.querySelectorAll('input[type=number]');

    wrap.onchange = function(e) {
      var target = e.target;
      if (target.tagName.toLowerCase() != 'input') return;

      var result = [].reduce.call(inpElems, function(current, next) {
        return (+current.value || +current) + +next.value;
      });

      if (result <= 100) {
        target.style.background = 'red';
      }

    };
  </script>
</body>
</html>

lolpops

02.10.2015 18:43

У меня ничего не происходит при первышении суммы 100...

Decode

02.10.2015 19:02

Цитата:

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

У меня ничего не происходит при первышении суммы 100...

И что должно происходить?

Цитата:

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

Есть задача в списке инпутов проверить сумму всех полей. Необходимо чтобы если пользователь вводит цифры и сумма не равна 100 то поля подсвечивалась красным

Lemme

02.10.2015 19:17

Замени

if (result <= 100) {
	target.style.background = 'red';
}

на

if (result > 100) {
	target.style.background = 'red';
}

lolpops

02.10.2015 21:25

Decode Спасибо, но все равно не работает как нужно..если написать в сумме значения обратно = 100, то поля красными так и остаются..можете поправить?

lolpops

02.10.2015 21:55

var wrap = document.querySelector('.poisk2'),
   inpElems = wrap.querySelectorAll('input[type=number]');

    wrap.onchange = function(e) {
      var target = e.target;
      if (target.tagName.toLowerCase() != 'input') return;
 var result = [].reduce.call(inpElems, 
        function(current, next) {
        return (+current.value || +current) + +next.value;
      });
 
      if (result > 100) {
    target.style.background = 'red';
        alert('Сумма должна быть равна 100%');
}
   if (result == 100) {
    target.style.background = 'white';
    }
 };

Изменил так, но все равно остаются некоторые поля красными которые например начинал менять вручную..И скрипт не работает на моем сайте..пробовал отключать jquery, ноль эмоций.

Lemme

02.10.2015 22:34

замени

target.style.background = 'white';

на

[].forEach.call(inpElems, function(item) {
     item.style.background = 'white';
});

lolpops

02.10.2015 22:45

Цитата:

Сообщение от Lemme (Сообщение 390732)

замени

target.style.background = 'white';

на

[].forEach.call(inpElems, function(item) {
     item.style.background = 'white';
});

Получилось так:

var wrap = document.querySelector('.poisk2'),
   inpElems = wrap.querySelectorAll('input[type=number]');
 
    wrap.onchange = function(e) {
      var target = e.target;
      if (target.tagName.toLowerCase() != 'input') return;
 var result = [].reduce.call(inpElems,
        function(current, next) {
        return (+current.value || +current) + +next.value;
      });
  
      if (result > 100) {
    target.style.background = 'red';

}
   if (result == 100) {
    [].forEach.call(inpElems, function(item) {
     item.style.background = 'white';
});

    }
 };

не работает, если поиграться с кнопочками будет такая ситуация что они не станут белыми..

Decode

02.10.2015 23:18

lolpops, а вы можете нормально написать условие? Так?

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div class="poisk2" align="right">
        <u>Процент использования</u><br />
        Закладки <input type="number" name="check[0]" id="check-0" min="0" max="100" value="30"> %<br />
        Yandex.ru <input type="number" name="check[1]" id="check-1" min="0" max="100" value="40"> %<br />
        Google.ru <input type="number" name="check[2]" id="check-2" min="0" max="100" value="20"> %<br />
        Nigma.ru <input type="number" name="check[3]" id="check-3" min="0" max="100" value="10"> %<br />
        Qip.ru <input type="number" name="check[4]" id="check-4" min="0" max="100" value="0"> %<br />
        Go.mail.ru <input type="number" name="check[5]" id="check-5" min="0" max="100" value="0"> %<br />
        Rambler.ru <input type="number" name="check[6]" id="check-6" min="0" max="100" value="0"> %<br />
        Google.com.ua <input type="number" name="check[7]" id="check-7" min="0" max="100" value="0"> %<br />
        Meta.ua <input type="number" name="check[8]" id="check-8" min="0" max="100" value="0"> %<br />
        Yandex.ua <input type="number" name="check[9]" id="check-9" min="0" max="100" value="0"> %<br />
        Bigmir.net <input type="number" name="check[10]" id="check-10" min="0" max="100" value="0"> %<br />
        Bing.com<input type="number" name="check[11]" id="check-11" min="0" max="100" value="0"> %<br />
        Yandex.com <input type="number" name="check[12]" id="check-12" min="0" max="100" value="0"> %<br />
    </div>
    
    <script>
        var wrap = document.querySelector('.poisk2'),
            inpElems = wrap.querySelectorAll('input[type=number]');
    
        wrap.onchange = function(e) {
            var target = e.target, result = 0;
    
            if (target.tagName.toLowerCase() != 'input') return;
    
            for (var i = 0; i < inpElems.length; i++) {
                result += +inpElems[i].value;
            }
    
            if (result <= 100) {
                [].forEach.call(inpElems, function(item) {
                    item.style.background = '';
                });
            } else {
                target.style.background  = 'red';
            }
    
            !target.value && (target.value = 0);
        };
    </script>
</body>
</html>

Цитата:

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

И скрипт не работает на моем сайте..пробовал отключать jquery, ноль эмоций.

Что консоль пишет? JQuery не причем.

lolpops

03.10.2015 10:45

Uncaught TypeError: Cannot read property 'querySelectorAll' of null
пишет это, поля не подсвечиваются и ничего вообще не делает

Decode

05.10.2015 00:24

lolpops, у вас разметка значит другая.

lolpops

06.10.2015 14:00

<div class="poisk2" align="right">
<u>Процент использования</u><br>
Закладки            <input type="number" name="check[0]" id="check-0" min="0" max="100" value="30"> %<br />
Yandex.ru           <input type="number" name="check[1]" id="check-1" min="0" max="100" value="40"> %<br />
Google.ru           <input type="number" name="check[2]" id="check-2" min="0" max="100" value="20"> %<br />
Nigma .ru           <input type="number" name="check[3]" id="check-3" min="0" max="100" value="10"> %<br />
Qip.ru              <input type="number" name="check[4]" id="check-4" min="0" max="100" value="0"> %<br />
Go.mail.ru          <input type="number" name="check[5]" id="check-5" min="0" max="100" value="0"> %<br />
Rambler.ru          <input type="number" name="check[6]" id="check-6" min="0" max="100" value="0"> %<br />
Google.com.ua       <input type="number" name="check[7]" id="check-7" min="0" max="100" value="0"> %<br />
Meta.ua             <input type="number" name="check[8]" id="check-8" min="0" max="100" value="0"> %<br />
Yandex.ua           <input type="number" name="check[9]" id="check-9" min="0" max="100" value="0"> %<br />
Bigmir.net          <input type="number" name="check[10]" id="check-10" min="0" max="100" value="0"> %<br />
Bing.com            <input type="number" name="check[11]" id="check-11" min="0" max="100" value="0"> %<br />
Yandex.com          <input type="number" name="check[12]" id="check-12" min="0" max="100" value="0"> %<br />
</div>

вот такая разметка, взял прямо с сайта..может ли не работать из за того что это див вложен еще в один и тп? ведь это не важно же..

Decode

06.10.2015 17:37

lolpops, а ссылку на сайт можно?

lolpops

09.10.2015 17:42

Вопрос еще актуален! Оплачу на WMR кто предоставит рабочий вариант на Jquery по типу этого (с привязкой к div где находятся элементы), задача подсвечивать внутреннюю область инпутов например красным цветом (всех инпутов) и писать аккуратно как-то что "сумма должна быть = 100" дабы информировать юзера..

Decode

10.10.2015 03:07

lolpops,

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        dl {
            margin-bottom:50px;
        }

        dl dt {
            background:#5f9be3;
            color:#fff;
            float:left;
            font-weight:bold;
            margin-right:10px;
            padding:5px;
            width:100px;
        }

        dl dd {
            margin:2px 0;
            padding:5px 0;
        }

        .warning {
            display: none;
            border-bottom: 2px dotted red;
        }
    </style>
</head>
<body>
    <div class="search">
        <h3>Процен использования</h3>
        <dl>
            <dt><label for="check-0">Закладки</label></dt>
            <dd><input type="number" name="check[0]" id="check-0" min="0" max="100" value="30" /></dd>

            <dt><label for="check-1">Yandex.ru</label></dt>
            <dd><input type="number" name="check[1]" id="check-1" min="0" max="100" value="40" /></dd>

            <dt><label for="check-2">Google.ru</label></dt>
            <dd><input type="number" name="check[2]" id="check-2" min="0" max="100" value="20" /></dd>

            <dt><label for="check-3">Nigma.ru</label></dt>
            <dd><input type="number" name="check[3]" id="check-3" min="0" max="100" value="10" /></dd>

            <dt><label for="check-4">Qip.ru</label></dt>
            <dd><input type="number" name="check[4]" id="check-4" min="0" max="100" value="0" /></dd>

            <dt><label for="check-5">Go.mail.ru</label></dt>
            <dd><input type="number" name="check[5]" id="check-5" min="0" max="100" value="0" /></dd>

            <dt><label for="check-6">Rambler.ru</label></dt>
            <dd><input type="number" name="check[2]" id="check-6" min="0" max="100" value="0" /></dd>

            <dt><label for="check-7">Google.com.ua</label></dt>
            <dd><input type="number" name="check[1]" id="check-7" min="0" max="100" value="0" /></dd>

            <dt><label for="check-8">Meta.ua</label></dt>
            <dd><input type="number" name="check[2]" id="check-8" min="0" max="100" value="0" /></dd>

            <dt><label for="check-9">Yandex.ua</label></dt>
            <dd><input type="number" name="check[2]" id="check-9" min="0" max="100" value="0" /></dd>

            <dt><label for="check-10">Bigmir.net</label></dt>
            <dd><input type="number" name="check[2]" id="check-10" min="0" max="100" value="0" /></dd>

            <dt><label for="check-11">Bing.com</label></dt>
            <dd><input type="number" name="check[2]" id="check-11" min="0" max="100" value="0" /></dd>

            <dt><label for="check-12">Yandex.com</label></dt>
            <dd><input type="number" name="check[2]" id="check-12" min="0" max="100" value="0" /></dd>
        </dl>
        <span class="warning">Сумма должна быть равной 100!</span>
    </div>

    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>

    <script>
        $('.search').on('change', 'input', function() {
            var inpElems = $('.search input'),
                result = 0,
                warning = $('.warning');

            inpElems.each(function() {
                result += +$(this).val();
            });

            if (result <= 100) {
                inpElems.each(function() {
                   $(this).css('background', '');
                   warning.hide();
                });
            } else {
                $(this).css('background', 'red');
                warning.show();
            }

            !$(this).val() && $(this).val(0);
        });
    </script>
</body>
</html>

lolpops

10.10.2015 10:16

Все работает! Сообщите в личку свой кошелек, отблагодарю:) и еще вопрос..если у меня 2 пары таких полей ( я обернул в другой див search2 и скопировал скрипт еще раз..это обязательно делать или можно как то короче записать просто добавив изменения в новый.
Т.е. у меня получилось
<div class="search">
инпуты
</div>

<div class="search2">
инпуты
</div>

Все работает, но может сам скрипт можно не копировать еще раз..т.е получилось два скрипта

<script>
        $('.search').on('change', 'input', function() {
            var inpElems = $('.search input'),
                result = 0,
                warning = $('.warning');

            inpElems.each(function() {
                result += +$(this).val();
            });

            if (result == 100) {
                inpElems.each(function() {
                   $(this).css('background', '');
                   warning.hide();
                });
            } else {
                $(this).css('background', 'red');
                warning.show();
            }

            !$(this).val() && $(this).val(0);
        });

    </script>

     <script>
        $('.search2').on('change', 'input', function() {
            var inpElems2 = $('.search2 input'),
                result2 = 0,
                warning2 = $('.warning2');

            inpElems2.each(function() {
                result2 += +$(this).val();
            });

            if (result2 == 100) {
                inpElems2.each(function() {
                   $(this).css('background', '');
                   warning2.hide();
                });
            } else {
                $(this).css('background', 'red');
                warning2.show();
            }

            !$(this).val() && $(this).val(0);
        });

    </script>

Decode

10.10.2015 15:52

lolpops,

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        dl {
            margin-bottom:50px;
        }

        dl dt {
            background:#5f9be3;
            color:#fff;
            float:left;
            font-weight:bold;
            margin-right:10px;
            padding:5px;
            width:100px;
        }

        dl dd {
            margin:2px 0;
            padding:5px 0;
        }

        .warning {
            display: none;
            border-bottom: 2px dotted red;
        }
    </style>
</head>
<body>
    <div class="search">
        <h3>Процен использования</h3>
        <dl>
            <dt><label for="check-0">Закладки</label></dt>
            <dd><input type="number" name="check[0]" id="check-0" min="0" max="100" value="30" /></dd>

            <dt><label for="check-1">Yandex.ru</label></dt>
            <dd><input type="number" name="check[1]" id="check-1" min="0" max="100" value="40" /></dd>

            <dt><label for="check-2">Google.ru</label></dt>
            <dd><input type="number" name="check[2]" id="check-2" min="0" max="100" value="20" /></dd>

            <dt><label for="check-3">Nigma.ru</label></dt>
            <dd><input type="number" name="check[3]" id="check-3" min="0" max="100" value="10" /></dd>

            <dt><label for="check-4">Qip.ru</label></dt>
            <dd><input type="number" name="check[4]" id="check-4" min="0" max="100" value="0" /></dd>

            <dt><label for="check-5">Go.mail.ru</label></dt>
            <dd><input type="number" name="check[5]" id="check-5" min="0" max="100" value="0" /></dd>

            <dt><label for="check-6">Rambler.ru</label></dt>
            <dd><input type="number" name="check[6]" id="check-6" min="0" max="100" value="0" /></dd>

            <dt><label for="check-7">Google.com.ua</label></dt>
            <dd><input type="number" name="check[7]" id="check-7" min="0" max="100" value="0" /></dd>

            <dt><label for="check-8">Meta.ua</label></dt>
            <dd><input type="number" name="check[8]" id="check-8" min="0" max="100" value="0" /></dd>

            <dt><label for="check-9">Yandex.ua</label></dt>
            <dd><input type="number" name="check[9]" id="check-9" min="0" max="100" value="0" /></dd>

            <dt><label for="check-10">Bigmir.net</label></dt>
            <dd><input type="number" name="check[10]" id="check-10" min="0" max="100" value="0" /></dd>

            <dt><label for="check-11">Bing.com</label></dt>
            <dd><input type="number" name="check[11]" id="check-11" min="0" max="100" value="0" /></dd>

            <dt><label for="check-12">Yandex.com</label></dt>
            <dd><input type="number" name="check[12]" id="check-12" min="0" max="100" value="0" /></dd>
        </dl>
        <span class="warning">Сумма должна быть равной 100!</span>
    </div>

    <div class="search">
        <h3>Процен использования</h3>
        <dl>
            <dt><label for="check-13">Закладки</label></dt>
            <dd><input type="number" name="check[13]" id="check-13" min="0" max="100" value="30" /></dd>

            <dt><label for="check-14">Yandex.ru</label></dt>
            <dd><input type="number" name="check[14]" id="check-14" min="0" max="100" value="40" /></dd>

            <dt><label for="check-15">Google.ru</label></dt>
            <dd><input type="number" name="check[15]" id="check-15" min="0" max="100" value="20" /></dd>

            <dt><label for="check-16">Nigma.ru</label></dt>
            <dd><input type="number" name="check[16]" id="check-16" min="0" max="100" value="10" /></dd>

            <dt><label for="check-17">Qip.ru</label></dt>
            <dd><input type="number" name="check[4]" id="check-17" min="0" max="100" value="0" /></dd>
        </dl>
        <span class="warning">Сумма должна быть равной 100!</span>
    </div>

    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>

    <script>
        $('.search').on('change', 'input', function(event) {
            var parent = $(this).closest('.search'),
                inpElems = parent.find('input'),
                result = 0,
                warning = parent.children('.warning');

            inpElems.each(function() {
                result += +$(this).val();
            });

            if (result <= 100) {
                inpElems.each(function() {
                   $(this).css('background', '');
                   warning.hide();
                });
            } else {
                $(this).css('background', 'red');
                warning.show();
            }

            !$(this).val() && $(this).val(0);
        });
    </script>
</body>
</html>

lolpops

10.10.2015 23:22

Спасибо! Скажите а событие change не реагирует на изменение полей сторонними средствами (я сделал простенький скрипт заполнения полей данными). Например юзер вводит данные в форму (ввел не правильно) и они подсветились красными, после этого жмет кнопку "заполнить" и все поля заполняются верными числами = однако подсветка красным так и продолжают быть активной (хотя должна пропасть)..как решить эту проблему?

Decode

11.10.2015 00:43

lolpops, можно же при клике на эту кнопку "запомнить" повесить функцию, которая уберет у всех инпутов красный background и и заполнит поля верными числами.

lolpops

11.10.2015 11:00

Разобрался сам, всем спасибо!

Часовой пояс GMT +3, время: 18:10.