Количество процентов заполненных входов внутри div

Question

есть ли простой способ подсчета процента заполненных входов внутри div?
Должно быть в Javascript, а не jQuery.

Вот мой HTML код

<div class="content-menu">          
<ul> 
    <li id="tab1"><a id="a1">General</br><p> x % FILLED </p></a></li> 
    <li id="tab2"><a id="a2">Contact info</br><p> x % FILLED </p></a></li> 
</ul> 
</div> 

<div id="tabs-1"> 
<input type="text" name="first_name" /> 
<input type="text" name="last_name" /> 
</div> 

.... 

Так в основном, если я только ввести имя, которое 1/2 из входов, то следует повторить в этом элементе LI 50%.
На каждой вкладке будет разное количество входов и собственное заполненное перкенаж.

Возможно ли только с помощью Javascript?

Любая помощь будет оценена, спасибо.

Answer 1

Первоначально вы могли получить все поля ввода внутри div. Тогда вы могли видеть, сколько они. Позже вы могли бы подсчитать, сколько из них имеет ценность. Используя эти два номера, вы можете получить то, что хотите.

// Get the div you want to look in. 
var div = document.getElementById("tabs-1"); 

// Get all the input fields inside your div 
var inputs = div.getElementsByTagName('input'); 

// Get the number of the found inputs. 
var totalInputs = inputs.length; 

// Loop through them and check which of them has a value. 
var inputsWithValue = 0; 
for(var i=0; i<totalInputs; i++) 
    if(inputs[i].value!=='') 
     inputsWithValue +=1;  

// Calculate the percentage. 
var filledPercentage = (inputsWithValue/totalInputs)*100; 

Answer 2

Здесь скрипка с мгновенным обновлением процента: http://jsfiddle.net/39xdvo96/1/

<div class="content-menu"> 
    <ul> 
     <li id="tab1"><a id="a1">Percentage<br/><p id="percentage">0%</p></a> 

     </li> 
    </ul> 
</div> 
<div id="tabs-1"> 
    <input type="text" name="first_name" /> 
    <input type="text" name="last_name" /> 
</div> 

Javascript

var getInputs = document.getElementsByTagName('input'); 

    for (i = 0; i < getInputs.length; i++) { 

     getInputs[i].onkeyup = function() { 

      var elem = document.getElementsByTagName('input'); 
      var vals = [].map.call(elem, function (input) { 
       return input.value; 
      }); 

     var filteredvals = vals.filter(function(val) { 
     return !(val === "" || typeof val == "undefined" || val === null); 
     }); 

      document.getElementById('percentage').innerHTML = filteredvals.length/(elem.length) * 100 +"%"; 


     }; 

}