I have a form with 5 fields

    <form>
   First name: <input type="text" name="firstname" required><br>
   Last name: <input type="text" name="lastname" required>
   Age: <input type="text" name="age" required>
   Gender: <input type="text" name="gender" required>
   City: <input type="text" name="city" required>
   Locality: <input type="text" name="locality">
   Address: <input type="text" name="address">
   </form>

When the form fields are entered based upon the number of fields filled how can I show the number of fields entered as percentage pleted like we see in some social sites. Here only first name, last name, age, gender, city are mandatory i.e, required, locality and address are not mandatory, hence it must take 5 fields into count and Like if 2 fields are entered it must show 40% pleted as when 5 fields make 100%, 2 fields make 40%

I have a form with 5 fields

    <form>
   First name: <input type="text" name="firstname" required><br>
   Last name: <input type="text" name="lastname" required>
   Age: <input type="text" name="age" required>
   Gender: <input type="text" name="gender" required>
   City: <input type="text" name="city" required>
   Locality: <input type="text" name="locality">
   Address: <input type="text" name="address">
   </form>

When the form fields are entered based upon the number of fields filled how can I show the number of fields entered as percentage pleted like we see in some social sites. Here only first name, last name, age, gender, city are mandatory i.e, required, locality and address are not mandatory, hence it must take 5 fields into count and Like if 2 fields are entered it must show 40% pleted as when 5 fields make 100%, 2 fields make 40%

• javascript
• jquery

• 2 Add event handler on <input> change and count filled fields in it. – Regent Commented Oct 20, 2014 at 5:29

3 Answers 3

You can simply add a <p> or whatever to your HTML:

<form>
   First name: <input type="text" name="firstname" required="required"><br>
   Last name: <input type="text" name="lastname" required="required">
   Age: <input type="text" name="age" required="required">
   Gender: <input type="text" name="gender" required="required">
   City: <input type="text" name="city" required="required">
   Locality: <input type="text" name="locality">
   Address: <input type="text" name="address">
</form>
<p id='percentage'>0% pleted</p>

And in your js file, on each change of input field, you count the required fields and the filled required fields to get the actual percentage. If you add required fields, you don't have to change anything in the js file.

$(document).ready(function(){
    $('input').on('change', function(){
        var cntreq = 0;
        var cntvals = 0;
        $('input').each(function(i, val) {
            if($(this).attr('required') == 'required') {
                cntreq++;
                if($(this).val() != '') {
                    cntvals++;
                }
            }
        });
        var count = (cntvals/cntreq)*100;
        $('#percentage').empty();
        $('#percentage').append(count+'% pleted');
    });
});

You could also bine that with some validation.

See fiddle here.

My take on this would be to use a <meter> element to display the progress, and establish that progress by simply working out the number of pleted <input /> elements as a percentage of the [required] elements:

// bind a 'keyup' event-handler to the [required] input elements:
$('input[required]').on('keyup', function() {
  // get the number of [required] input elements, and add the 'required' class:
  var required = $('input[required]').addClass('required'),
  // filter the [required] input elements, keeping only those
  // with entered text:
    pleted = required.filter(function() {
      return this.value.trim().length > 0;
    // remove the 'required' class for pleted fields:
    }).removeClass('required');
 
  // if there are any pleted inputs (to prevent any attempts to divide zero):
  if (pleted.length) {
    // set the value of the <meter> to the percentage of pleted inputs:
    $('#progress').val((pleted.length / required.length) * 100);
  }
}).addClass('required');

form {
  width: 50%;
  margin: 0 auto;
}
label {
  display: block;
  overflow: hidden;
  margin: 0 0 0.3em 0;
}
label input {
  width: 10em;
  float: right;
}
input[required] {
  border-bottom-color: #0c0;
}
input[required].required {
  border-bottom-color: #f00;
}
meter {
  margin: 0.5em 0;
  width: 100%;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label>First name:
    <input type="text" name="firstname" required>
  </label>
  <label>Last name:
    <input type="text" name="lastname" required>
  </label>
  <label>
    Age:
    <input type="text" name="age" required>
  </label>
  <label>Gender:
    <input type="text" name="gender" required>
  </label>
  <label>City:
    <input type="text" name="city" required>
  </label>
  <label>Locality:
    <input type="text" name="locality">
  </label>
  <label>Address:
    <input type="text" name="address">
  </label>
  <meter id="progress" min="0" max="100" value="0" />
</form>

References:

• HTML:
  • <meter>.
• jQuery:
  • addClass().
  • filter().
  • on().
  • removeClass().
  • val().

Here's a basic non jquery solution:

(function(d, w, undefined) {
  
  d.querySelector('form').addEventListener('keyup', checkDone);
  
  function checkDone(e) {
    var originator = e.target || e.srcElement
       ,nvalue = 0
       ,required = d.querySelectorAll('input[required]')
       ,indicator = d.querySelector('#percentage')
       ,xwidth = 0;
    [].slice.call(d.querySelectorAll('input[required]')).forEach(
      function (el) { nvalue += el.value.length && 1 || 0; }
    );
    xwidth = ( (nvalue/required.length) * 100 );
    if (nvalue > 0 && xwidth<=100) {
      indicator.style.visibility = 'visible';
      indicator.style.width = xwidth + '%';
      indicator.setAttribute('data-percDone', xwidth + '% done');
    }
  }
  
}(document, window))

#percentage {
  background-color: green;
  color: white;
  height: 1.5em;
  line-height: 1.5em;
  padding-left: 1em;
  visibility: hidden;
}

.indicator {
  width: 300px;
}

#percentage:before {
  content: attr(data-percDone);
}

<form>
   First name: <input type="text" name="firstname" required><br>
   Last name: <input type="text" name="lastname" required><br>
   Age: <input type="text" name="age" required><br>
   Gender: <input type="text" name="gender" required><br>
   City: <input type="text" name="city" required><br>
   Locality: <input type="text" name="locality"><br>
   Address: <input type="text" name="address">
   </form>
   <div class="indicator">
    <div id="percentage" data-percDone="0%"><div>
   </div>