percentage completed form javascript - version 2

1:12 am, May 8, 2018

this will show the percentage (%) that a form has been completed by counting the element that have been completed and calculating the percentage. use the element change to fire the function and calculate the percentage. this one will show the % completed when the form elements are filled in loop through form elements var myForm = document.forms["myForm"]; var emailbody = ""; var form = document.getElementById('myForm'); for(var i=0; i < form.elements.length; i++){ if(form.elements[i].value === '' && form.elements[i].hasAttribute('required')){ alert('Fields marked with * are Required.'); return false; } }

Code

html

css

function check_form() {
	var form = document.getElementById('testform');
	var elem = document.getElementById("form-bar");

total = form.elements.length;
	width = 0; // bar width
	
	percent_step = 1 / total; // total x 100 = should be the %
	percent = percent_step * 100; // this will be the amount each element moves the form status bar
	//console.log(percent);

for(var i=0; i < form.elements.length; i++){
		if(form.elements[i].value === '') {
			//console.log('field is blank'+i);
		} else {
			//console.log('field is not'+i);
			width = width + percent;
		}
	}
	//console.log(width);
        elem.style.width = width + '%'; 
        elem.innerHTML = width * 1 + '%';

}

// listen to the keys
// document.addEventListener("keydown", check_form('testform'));
// document.addEventListener("keyup", check_form('testform'));
// document.addEventListener("click", check_form('testform'));
setInterval(function(){ check_form(); }, 500);

scripts

Download & Run

Download File Run Demo Re-load Preview