Hi nauna,
For showing total percentage of user profile completion, you may need to consider the parameters like firstname, lastname, email, address etc. to calculate the percentage of completion.
You can give pre defined percentage for each parameter, If the user has provided firstname(20%), lastname(20%), email(30%), address(30%) then you can mention the percentage completed.
Check this example. Now please take its reference and correct your code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.bar-success
{
background-color: #5cb85c;
}
.bar-info
{
background-color: #5bc0de;
}
.bar-warning
{
background-color: #f0ad4e;
}
.bar-danger
{
background-color: #d9534f;
}
</style>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
CalculatePercentage();
});
function CalculatePercentage() {
var firstNamePercentage = 20;
var lastNamePercentage = 20;
var emailPercentage = 30;
var addressPercentage = 30;
var percent = 0;
if ($('#txtFirstName').val() != '') {
percent += firstNamePercentage;
}
if ($('#txtLastName').val() != '') {
percent += lastNamePercentage;
}
if ($('#txtEmail').val() != '') {
percent += emailPercentage;
}
if ($('#txtAddress').val() != '') {
percent += addressPercentage;
}
$('.progress').addClass('progress-striped').addClass('active');
$('.progress .progress-bar:first').removeClass().addClass('progress-bar')
.addClass((percent < 40) ? 'progress-bar-danger' : ((percent < 80) ? 'progress-bar-warning' : 'progress-bar-success'));
$('.progress .progress-bar:first').width(percent + '%');
$('.progress .progress-bar:first').text(percent + '%');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>First Name</td>
<td><asp:TextBox ID="txtFirstName" runat="server" onchange="CalculatePercentage()" CssClass="form-control"></asp:TextBox></td>
</tr>
<tr>
<td>Last Name</td>
<td><asp:TextBox ID="txtLastName" runat="server" onchange="CalculatePercentage()" CssClass="form-control"></asp:TextBox></td>
</tr>
<tr>
<td>Email</td>
<td><asp:TextBox ID="txtEmail" runat="server" onchange="CalculatePercentage()" CssClass="form-control"></asp:TextBox></td>
</tr>
<tr>
<td>Address</td>
<td><asp:TextBox ID="txtAddress" runat="server" onchange="CalculatePercentage()" CssClass="form-control"></asp:TextBox></td>
</tr>
</table>
<br />
Profile Completed :
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success">
</div>
</div>
</form>
</body>
</html>
Screenshot
