Не нравятся результаты поиска? Попробуйте другой поиск!

DLE FAQ » Все вопросы » Общие вопросы » Как подсчитать количество заполненных input в отдельное поле?

Как подсчитать количество заполненных input в отдельное поле?

monach 17.01.2020 скрипт, jquery Общие вопросы, jQuery 1594

вопрос

Добрый день!
При добавлении новости с сайта, требуется подсчитать сколько полей "input" заполнено и вывести эту цифру в отдельный input.
Нашел скрипт, но там нужно прописывать на каждый input свой ID, что не хотелось бы.
Есть поле ингредиент, в нем порядка 15 позиций "input" созданных как доп.поля. Не всегда будут использоваться все поля для заполнения, что и хотелось бы вывести, сколько всего заполнено полей и прописать это в отдельное поле, которое будет также создано как доп.поле, чтобы потом вывести это на сайте.
Сам скрипт что я ковырял:

Показать / Скрыть текст


function countlines(what) {
    var headline = 1;
    var oneline = 1;
    var twoline = 1;
    var webline = 1;

    var valhead = document.getElementById('xf_ingredient1').value;
    if (/^\s*$/g.test(valhead) || valhead.indexOf('\n') != -1) {
        headline = 0
    };

    var valone = document.getElementById('xf_ingredient2').value;
    if (/^\s*$/g.test(valone) || valone.indexOf('\n') != -1) {
        oneline = 0
    };

    var valtwo = document.getElementById('xf_ingredient3').value;
    if (/^\s*$/g.test(valtwo) || valtwo.indexOf('\n') != -1) {
        twoline = 0
    };

    var valweb = document.getElementById('xf_ingredient4').value;
    if (/^\s*$/g.test(valweb) || valweb.indexOf('\n') != -1) {
        webline = 0
    };

    (document.getElementById('webcost').value = "$" + ((headline + oneline + twoline + webline) * 16.50).toFixed(2));
    (document.getElementById('totallines').value = headline + oneline + twoline + webline);
}

Вывод доп.полей с одной строкой "input"

Показать / Скрыть текст

        
        <ul class="ingredient-b">
            <li class="input-ingr">[xfinput_ingredient1]</li>
            <li class="input-kol">[xfinput_kol-ingredient1]</li>
            <li class="select-multiple">[xfinput_gramm-ingredient1]</li>
        </ul>
        <ul class="ingredient-b">
            <li class="input-ingr">[xfinput_ingredient2]</li>
            <li class="input-kol">[xfinput_kol-ingredient2]</li>
            <li class="select-multiple">[xfinput_gramm-ingredient2]</li>
        </ul>
         <ul class="ingredient-b">
            <li class="input-ingr">[xfinput_ingredient3]</li>
            <li class="input-kol">[xfinput_kol-ingredient3]</li>
            <li class="select-multiple">[xfinput_gramm-ingredient3]</li>
        </ul>
         <ul class="ingredient-b">
            <li class="input-ingr">[xfinput_ingredient4]</li>
            <li class="input-kol">[xfinput_kol-ingredient4]</li>
            <li class="select-multiple">[xfinput_gramm-ingredient4]</li>
        </ul>

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

Вот пример как должно выводится в карточке:

Всем спасибо заранее за помощь!

Ответил: dj-avtosh

https://dle-faq.ru/faq/common/26670-kak-podschitat-kolichestvo-zapolnennyh-input-v-otdelnoe-pole.html#comment-id-74487

13 комментариев

PHP-developer

3199

dj-avtosh - 2017-11-2217 января 2020 14:47 - #74473

$('input.КЛАСС_ИПУНТА[value!=""]').length

По заказам пишем сюда: @Rud00y

ЯД: 41001679231462
Заказы в telegram (ремонт модулей, оптимизация нагрузок и т.п.):
В телегу писать сразу задачу и бюджет.

Юзер

monach - 2017-11-2217 января 2020 15:08 - #74475

dj-avtosh, Спасибо Вам большое за мгновенный ответ!
Не могли бы Вы написать, как это все соединить?
Вы написали решение, но как заставить это работать, не могу сообразить.

$('input.КЛАСС_ИПУНТА[value!=""]').length

Это поля заполняются по необходимости:

<ul class="ingredient-b">
   <li class="input-ingr">[xfinput_ingredient1]</li>
   <li class="input-ingr">[xfinput_ingredient2]</li>
   <li class="input-ingr">[xfinput_ingredient3]</li>
   <li class="input-ingr">[xfinput_ingredient4]</li>
   <li class="input-ingr">[xfinput_ingredient5]</li>
</ul>

Это поле куда должно прописываться количество заполненных полей:

<span class="kol-ingr">[xfinput_kol_ingr]</span>

PHP-developer

3199

dj-avtosh - 2017-11-2217 января 2020 15:10 - #74476

Какой отличительный элемент имеет конкретный нужный input? я по скрину исходный код не вижу.

PHP-developer

3199

dj-avtosh - 2017-11-2217 января 2020 15:25 - #74477

Если ваши input выглядят так:

<input name="xfinput_ingredient1" type="text" value="">
<input name="xfinput_ingredient2" type="text" value="">
<input name="xfinput_ingredient3" type="text" value="">
<input name="xfinput_ingredient4" type="text" value="">
<input name="xfinput_ingredient5" type="text" value="">

то:

$('input[name*="xfinput_ingredient"]').filter(function() {
  return this.value.trim() != '';
}).length

Юзер

monach - 2017-11-2217 января 2020 15:31 - #74478

Если я вас правильно понял, я подписал те доп.поля, которые имеют тег input, в них прописывается ингредиент по необходимости. В самом низу кода прописал также доп.поле куда и должно выводится подсчет заполненных input.


        <ul class="ingredient-b">
            <li class="input-ingr">[xfinput_ingredient1]</li>  // INPUT который должен подсчитываться если заполнен
            <li class="input-kol">[xfinput_kol-ingredient1]</li>
            <li class="select-multiple">[xfinput_gramm-ingredient1]</li>
        </ul>
        <ul class="ingredient-b">
            <li class="input-ingr">[xfinput_ingredient2]</li>  // INPUT который должен подсчитываться если заполнен
            <li class="input-kol">[xfinput_kol-ingredient2]</li>
            <li class="select-multiple">[xfinput_gramm-ingredient2]</li>
        </ul>
         <ul class="ingredient-b">
            <li class="input-ingr">[xfinput_ingredient3]</li>  // INPUT который должен подсчитываться если заполнен
            <li class="input-kol">[xfinput_kol-ingredient3]</li>
            <li class="select-multiple">[xfinput_gramm-ingredient3]</li>
        </ul>
         <ul class="ingredient-b">
            <li class="input-ingr">[xfinput_ingredient4]</li>  // INPUT который должен подсчитываться если заполнен
            <li class="input-kol">[xfinput_kol-ingredient4]</li>
            <li class="select-multiple">[xfinput_gramm-ingredient4]</li>
        </ul>        
        
        // В этот INPUT указывается количество заполненных полей "input-ов"
        <span class="kol-ingr">[xfinput_kol_ingr]</span>

PHP-developer

3199

dj-avtosh - 2017-11-2217 января 2020 15:34 - #74479

Вы сами тут видите input? Пожалуйста, используйте инструмент браузера "исследовать элемент".

Юзер

monach - 2017-11-2217 января 2020 15:34 - #74480

Вот скрин заполненного одного из input. Может понадобится.
У каждого заполняемого поля ID одинаковы, имеют лишь в конце другую цифру.

PHP-developer

3199

dj-avtosh - 2017-11-2217 января 2020 15:37 - #74481

$('input[id^="xf_ingredient"]').filter(function() {
  return this.value.trim() != '';
}).length

Юзер

monach - 2017-11-2217 января 2020 15:49 - #74484

dj-avtosh,
Спасибо Вам за помощь!
Прошу Вас, подскажите, пожалуйста, как теперь количество вывести в этот input?

<span class="kol-ingr">[xfinput_kol-ingr]</span>

PHP-developer

3199

dj-avtosh - 2017-11-2217 января 2020 15:48 - #74482

Конечный скрипт (если я верно задачу понял):

$(function() {

  $('input[id^="xf_ingredient"]').on('change', function(){

    var countNonEmptyIngrInput = $('input[id^="xf_ingredient"]').filter(function() {
      return this.value.trim() != '';
    }).length;
    
		$('input#xf_kol_ingr').val(countNonEmptyIngrInput);

  });

});

Юзер

monach - 2017-11-2217 января 2020 15:50 - #74486

Большое спасибо, все работает!
От всей души благодарю!

PHP-developer

3199

dj-avtosh - 2017-11-2217 января 2020 15:53 - #74487

Для того, что бы менялось значение мгновенно (пока вы не убрали фокус с поля):

$(function() {

  $('input[id^="xf_ingredient"]').on('input', function(){

    var countNonEmptyIngrInput = $('input[id^="xf_ingredient"]').filter(function() {
      return this.value.trim() != '';
    }).length;
    
		$('input#xf_kol_ingr').val(countNonEmptyIngrInput);

  });

});