Как проверить все элементы формы с определённым классом у которых есть value?

Question

[Alex_87]

Здравствуйте! Моя задача получить числовое значение этих элементов. Всего их 3, но считать нужно только те, у которого мы что-то выбрали. Как это сделать?
код:

<form class="form" id="_side3">
                               <label  for="inlineFormInputGroupUsername2">Имя пользователя</label>
                               <div class="input-group mb-2 mr-sm-2">

                                   <input type="text" class="form-control check-for-value" style="margin:0px" id="inlineFormInputGroupUsername2" placeholder="Имя пользователя">
                                   <div class="input-group-prepend">
                                       <div class="input-group-text">@</div>
                                   </div>
                               </div>
                               <label for="inlineFormInputGroupUsername2">Номер</label>
                               <div class="input-group mb-2 mr-sm-2">

                                   <input type="number" min="0.00" max="44418.48" step="any" class="form-control check-for-value" style="margin:0px" id="inlineFormInputGroupUsername2" placeholder="0">
                                   <div class="input-group-prepend">
                                       <div class="input-group-text">@</div>
                                   </div>
                               </div>

                               <div class="form-group">
                                   <label for="exampleFormControlSelect1">Example select</label>
                                   <select class="form-control check-for-value" style="margin:0 auto" id="exampleFormControlSelect1">
                                       <option>1</option>
                                       <option>2</option>
                                       <option>3</option>
                                       <option>4</option>
                                       <option>5</option>
                                   </select>
                               </div>
                               <button type="submit" class="btn btn-primary" id="submit" disabled="disabled" style="background:red; border:0px" >Next</button>
                           </form>

Код, который нужно переделать:

<script>
        _side3.onclick = () => {
            const checked = _side3.querySelectorAll('элементы с классом, у которых есть значение').length
            const boxes = _side3.querySelectorAll('всего элементов с классом').length
            submit.disabled = (checked !== boxes)
        }
    </script>

Answer 1

[Stalker_RED]

В первом приближении так:

const foo = Array.from(document.querySelectorAll('.someclass'))
   .filter(elem => parseInt(elem.value) !== 0)

Но "те, у которого мы что-то выбрали" портит всю малину. Мы же могли выбрать ноль, или осознанно оставить значение по умолчанию?

Вот вам:

changed: элементы, у которых изменено значение
default: элементы, у которых НЕ изменено значение
touched: элементы которые изменялись, даже если сейчас дефолтное значение

Comments

[Alex_87]

а если представить, что у нас не 0 и значения не по умолчанию? И мне нужно не значение класса получить, а высчитывать количество классов, у которых вообще что-то есть. То есть, у нас 3 элемента с таким классом.(2 строчка проверки(const boxes)) а элементов, у которых что-то заполнено - 2(зависит от того, как заполняется форма).

[Stalker_RED]

Alex_87, я могу даже представить, что на марсе яблони цветут.
Вы опишите конкретнее, по каком именно признаку надо выбирать элементы.
У которых значение отличается от стартового?

[Alex_87]

Stalker_RED, "У которых значение отличается от стартового?"
ДА-ДА, Можно и так!!!

[Alex_87]

Зайдите пожалуйста сюда, если можете: https://www.viventor.com/demo/profile/add-funds
Обратите внимание, что кнопка send активна только после выбора всех 2-х input и одного select

[Stalker_RED]

Alex_87, дополнил ответ