Count all shown inputs (not hidden) that have a value with javascript

Question

In the picture, you can see that there are three inputs on each column, except last one where I suppose to show the number of inputs from first column "Configuratie panouri" which are hidden by default and shown by javascript only if needeed. In my case, in the last input I should get the number 3, because there are 3 inputs in the first column showed by javascript.

Inputs

HTML code:

<div class="input-group date col-xs-4" id="PanouriFinale">
      <label>Configurație panouri</label>
      <input type="text" class="form-control centerElement" name="SuperiorPanel" id="SuperiorPanel" readonly style="display: none; border: 2px solid white;">
      <input type="text" class="form-control centerElement" name="Intermediar3Panel" id="Intermediar3Panel" readonly style="display: none; border: 2px solid white;">
      <input type="text" class="form-control centerElement" name="Intermediar2Panel" id="Intermediar2Panel" readonly style="display: none; border: 2px solid white;">
      <input type="text" class="form-control centerElement" name="Intermediar1Panel" id="Intermediar1Panel" readonly style="display: none; border: 2px solid white;">
      <input type="text" class="form-control centerElement" name="InferiorPanel" id="InferiorPanel" readonly style="display: none; border: 2px solid white;">
    </div>

And javascript:

if (Height >= 1845 && Height <= 3000)
        {
            $.ajax({
                url: "includes/calculator/inferiorPanel.php",
                data: { height: Height },
                type: 'POST',
                cache: false,
                success: function(result){
                    $("#InferiorPanel").show().val(result);
                    $("#InferiorPanel2").show().val(result);
                    $("#PVInferior").show();
                    $("#FInferior").show();
            }});

            $.ajax({
                url: "includes/calculator/Intermediar1Panel.php",
                data: { height: Height },
                type: 'POST',
                cache: false,
                success: function(result){
                    $("#Intermediar1Panel").show().val(result);
                    $("#Intermediar1Panel2").show().val(result);
                    $("#PVIntermediar1").show();
                    $("#FIntermediar1").show();
            }});

            $.ajax({
                url: "includes/calculator/Intermediar2Panel.php",
                data: { height: Height },
                type: 'POST',
                cache: false,
                success: function(result){
                    if(result === '0') {
                        $("#Intermediar2Panel").hide();
                        $("#Intermediar2Panel2").hide();
                    } else
                    {
                        $("#Intermediar2Panel").show().val(result);
                        $("#Intermediar2Panel2").show().val(result);
                        $("#PVIntermediar2").show();
                        $("#FIntermediar2").show();
                    }
            }});

            $.ajax({
                url: "includes/calculator/Intermediar3Panel.php",
                data: { height: Height },
                type: 'POST',
                cache: false,
                success: function(result){
                    if(result === '0') {
                        $("#Intermediar3Panel").hide();
                        $("#Intermediar3Panel2").hide();
                    } else 
                    {
                        $("#Intermediar3Panel").show().val(result);
                        $("#Intermediar3Panel2").show().val(result);
                        $("#PVIntermediar3").show();
                        $("#FIntermediar3").show();
                    }
            }});

            var InferiorPanel2 = document.getElementById('InferiorPanel2');
            var Intermediar1Panel2 = document.getElementById('Intermediar1Panel2');
            var Intermediar2Panel2 = document.getElementById('Intermediar2Panel2');
            var Intermediar3Panel2 = document.getElementById('Intermediar3Panel2');

            $.ajax({
                url: "includes/calculator/SuperiorPanel.php",
                data: { height: Height },
                type: 'POST',
                cache: false,
                success: function(result){
            $("#SuperiorPanel").show().val(result);
            $("#SuperiorPanel2").show().val(Height - InferiorPanel2.value - Intermediar1Panel2.value - Intermediar2Panel2.value - Intermediar3Panel2.value);
            }});
            $("#PVSuperior").show();
            $("#FSuperior").show();
            var totalP = $('#PanouriFinale input').filter(function() {
                return $(this).css('display') !== 'none';
            }).length;
            $("#totalPanouri").val(totalP);
            return false;
        } else
        {
            document.getElementById('height').style.borderColor = "red";
            document.getElementById('erori').innerHTML = "<span style='color: red;'>Introdu o valoare cuprinsă între 1845 și 3000mm!</span>";
            return false;
        }

As you can see, all inputs are hidden, but will be showed when needed with javascript. All I want is to count how many visible inputs I have in my first column called "Configuratie panouri" and show it on the last input in the picture.

var count = $("#PanouriFinale input:visible").length; $("#totalPanouri").val(+count); should do the trick, but not working. — Bogdan C
– Bogdan C, Commented Apr 9, 2017 at 14:54

Kody R. · Accepted Answer · 2017-04-09 15:03:33Z

1

If I understand your question correctly:

// Gets all inputs with class name 'centerElement'
var inputsIWant = panouriFinale.getElementsByClassName('centerElement');
var inputsIWantLn = inputsIWant.length;

var numberOfVisibleInputs = 0;
for (var i = 0; i < inputsIWantLn; i++) {

    // Goes through each input to see if display is set to none
    if (inputsIWant[i].style.display == "none") {
        numberOfVisibleInputs++;
    }
}

// Logs the number of inputs that aren't hidden
console.log(numberOfVisibleInputs);

edited Apr 9, 2017 at 15:03

answered Apr 9, 2017 at 14:51

Kody R.

2,4705 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Bogdan C Over a year ago

The issue is that I have more divs with inputs class centerElement there.

Bogdan C Over a year ago

I should relate to the div id which is "panouriFinale".

Kody R. Over a year ago

@BogdanC I made an edit - instead of "document" I changed it to the parent div's ID. That will retrieve all elements with className "centerElement" inside the parent "panouriFinale"

Bogdan C Over a year ago

This return me the number 5. The ideea is to show all elements which are show() by javascript.

Bogdan C Over a year ago

I need to count just the inputs from here which have a value inside.

|

Collectives™ on Stack Overflow

Count all shown inputs (not hidden) that have a value with javascript

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related