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

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


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

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


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



Вот пример как должно выводится при добавлении новости:
Как подсчитать количество заполненных input в отдельное поле?


Вот пример как должно выводится в карточке:
Как подсчитать количество заполненных input в отдельное поле?


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

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

dj-avtosh
PHP-developer

dj-avtosh - 17 января 2020 14:47 -

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

ЯД: 41001679231462
Заказы в telegram: @web_lord_moon
В телегу писать сразу задачу и бюджет.

monach
Юзер

monach - 17 января 2020 15:08 -

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>

dj-avtosh
PHP-developer

dj-avtosh - 17 января 2020 15:10 -

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

ЯД: 41001679231462
Заказы в telegram: @web_lord_moon
В телегу писать сразу задачу и бюджет.

dj-avtosh
PHP-developer

dj-avtosh - 17 января 2020 15:25 -

Если ваши 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

ЯД: 41001679231462
Заказы в telegram: @web_lord_moon
В телегу писать сразу задачу и бюджет.

monach
Юзер

monach - 17 января 2020 15:31 -

Если я вас правильно понял, я подписал те доп.поля, которые имеют тег 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>

dj-avtosh
PHP-developer

dj-avtosh - 17 января 2020 15:34 -

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

ЯД: 41001679231462
Заказы в telegram: @web_lord_moon
В телегу писать сразу задачу и бюджет.

monach
Юзер

monach - 17 января 2020 15:34 -


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

dj-avtosh
PHP-developer

dj-avtosh - 17 января 2020 15:37 -

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

ЯД: 41001679231462
Заказы в telegram: @web_lord_moon
В телегу писать сразу задачу и бюджет.

monach
Юзер

monach - 17 января 2020 15:49 -


dj-avtosh,
Спасибо Вам за помощь!
Прошу Вас, подскажите, пожалуйста, как теперь количество вывести в этот input?
<span class="kol-ingr">[xfinput_kol-ingr]</span>

dj-avtosh
PHP-developer

dj-avtosh - 17 января 2020 15:48 -

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

$(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);

  });

});

ЯД: 41001679231462
Заказы в telegram: @web_lord_moon
В телегу писать сразу задачу и бюджет.

monach
Юзер

monach - 17 января 2020 15:50 -

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

dj-avtosh
PHP-developer

dj-avtosh - 17 января 2020 15:53 -

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

$(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);

  });

});

ЯД: 41001679231462
Заказы в telegram: @web_lord_moon
В телегу писать сразу задачу и бюджет.

monach
Юзер

monach - 17 января 2020 15:55 -

Благодарю Вас!

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх