How to set to 100% and reset to 0% progress bar
Question
I want to work my progress bar to certain percentage on each click. Now its is working only up to 75%. On saving it should show 100% but it doesn't showing that. Similarly by clicking back button it is going upto 25% on it should reset to 0% on clicking back button third time.
HTML
<div id="myProgressbar" class="progress" style="height: 2px;">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%; height: 10px;">
<span class="sr-only">0% Complete</span>
</div>
</div>
<div class="btns">
<button type="button" name="sub" id="back" class="btn btn-default btn-lg" onclick="myFunctions()">back</button>
<button type="button" name="add" id="continue" class="btn btn-success btn-lg" onclick="myFunction()" >Continue</button>
</div>
<form action="/action_page.php" id="person" class="form-inline">
<div class="form-group">
<label for="fname">First Name:<input type="text" class="form-control" id="fname" placeholder="First Name" required="" title="First Name"></label>
</div>
<div class="form-group">
<label for="mname">Middle Name:<input type="text" class="form-control" id="mname" placeholder="Middle Name" title="Middle Name"></label>
</div>
<div class="form-group">
<label for="lname">Last name:<input type="text" class="form-control" id="lname" placeholder="Last Name" title="Last Name"></label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<form action="/action_page.php" id="details" class="form-inline">
<div class="form-group">
<label for="address">Address:<input type="text" class="form-control" rows="5" id="address" placeholder="Enter Address" title="Address"></label>
</div>
<div class="form-group">
<label for="city">City:<input type="text" class="form-control" id="city" placeholder="Enter City"></label>
</div>
<div class="form-group">
<label for="pin">Pin Code:<input type="text" class="form-control" id="pin" placeholder="Enter Pincode"></label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<form action="/action_page.php" id="account" class="form-inline">
<div class="form-group">
<label for="pis">PIS:<input type="text" class="form-control" id="pis" placeholder="PIS"></label>
</div>
<div class="form-group">
<label for="psp">PSP:<input type="text" class="form-control" id="psp" placeholder="PSP"></label>
</div>
<div class="form-group">
<label for="ped">PED:<input type="text" class="form-control" id="ped" placeholder="PED"></label>
</div>
<div class="form-group">
<label for="pno">PNO:<input type="text" class="form-control" id="pno" placeholder="PNO"></label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<form action="/action_page.php" id="premium" class="form-inline">
<div class="form-group">
<label for="pis">IPU:<input type="text" class="form-control" id="pis" placeholder="PIS"></label>
</div>
<div class="form-group">
<label for="psp">NCB:<input type="text" class="form-control" id="psp" placeholder="PSP"></label>
</div>
<div class="form-group">
<label for="ped">TP REF:<input type="text" class="form-control" id="ped" placeholder="PED"></label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<div class="btns">
<button type="button" name="sub" id="back" class="btn btn-default btn-lg" onclick="myFunctions()">back</button>
<button type="button" name="add" id="continue" class="btn btn-success btn-lg" onclick="myFunction()" >Continue</button>
</div>
Javascript
<script>
var num = 1;
document.getElementById("back").disabled = true;
document.getElementById("details").style.display="none";
document.getElementById("person").style.display="block";
document.getElementById("account").style.display="none";
document.getElementById("premium").style.display="none";
function myFunction() {
var listArry = document.getElementsByClassName('list');
for(var i = 0; i < listArry.length; i++){
listArry[i].style.color = "#CCC";
}
if (num==1){
document.getElementById('navlnk1').style.color = "black";
document.getElementById('navlnk').style.color = "#CCC";
document.getElementById("back").disabled = false;
document.getElementById("person").style.display="none";
document.getElementById("details").style.display="block";
var elem = document.getElementById("myProgressbar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 25) {
clearInterval(id);
} else {
width++;
document.getElementById("myProgressbar").style.backgroundColor = "#0FA561";
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
num=2;
}
else if(num==2){
document.getElementById('navlnk2').style.color = "black";
document.getElementById("details").style.display="none";
document.getElementById("account").style.display="block";
var elem = document.getElementById("myProgressbar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 50) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
num=3;
}
else if(num==3){
document.getElementById('navlnk3').style.color = "black";
document.getElementById("account").style.display="none";
document.getElementById("premium").style.display="block";
document.getElementById('continue').innerHTML = "Save";
var elem = document.getElementById("myProgressbar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 75) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
}
</script>
<script>
var num = 1;
function myFunctions() {
var listArry = document.getElementsByClassName('list');
for(var i = listArry.length; i >0; i--){
}
if (num==3){
document.getElementById('navlnk2').style.color = "black";
document.getElementById('navlnk3').style.color = "#CCC";
document.getElementById('navlnk1').style.color = "#CCC";
document.getElementById('navlnk').style.color = "#CCC";
document.getElementById("premium").style.display="none";
document.getElementById("account").style.display="block";
document.getElementById('continue').innerHTML = "Continue";
var elem = document.getElementById("myProgressbar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 50) {
clearInterval(id);
} else {
width++;
document.getElementById("myProgressbar").style.backgroundColor = "#0FA561";
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
num=2;
}
else if (num==2){
document.getElementById('navlnk1').style.color = "black";
document.getElementById('navlnk').style.color = "#CCC";
document.getElementById('navlnk2').style.color = "#CCC";
document.getElementById("account").style.display="none";
document.getElementById("details").style.display="block";
var elem = document.getElementById("myProgressbar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 25) {
clearInterval(id);
} else {
width++;
document.getElementById("myProgressbar").style.backgroundColor = "#0FA561";
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
num=1;
}
else if(num==1){
document.getElementById('navlnk').style.color = "black";
document.getElementById('navlnk1').style.color = "#CCC";
document.getElementById("details").style.display="none";
document.getElementById("person").style.display="block";
document.getElementById("back").disabled = true;
}
}
</script>
<script>
var num = 1;
function myFunctions() {
var listArry = document.getElementsByClassName('list');
for(var i = listArry.length; i >0; i--){
}
if (num==3){
document.getElementById('navlnk2').style.color = "black";
document.getElementById('navlnk3').style.color = "#CCC";
document.getElementById('navlnk1').style.color = "#CCC";
document.getElementById('navlnk').style.color = "#CCC";
document.getElementById("premium").style.display="none";
document.getElementById("account").style.display="block";
document.getElementById('continue').innerHTML = "Continue";
var elem = document.getElementById("myProgressbar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 50) {
clearInterval(id);
} else {
width++;
document.getElementById("myProgressbar").style.backgroundColor = "#0FA561";
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
num=2;
}
else if (num==2){
document.getElementById('navlnk1').style.color = "black";
document.getElementById('navlnk').style.color = "#CCC";
document.getElementById('navlnk2').style.color = "#CCC";
document.getElementById("account").style.display="none";
document.getElementById("details").style.display="block";
var elem = document.getElementById("myProgressbar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 25) {
clearInterval(id);
} else {
width++;
document.getElementById("myProgressbar").style.backgroundColor = "#0FA561";
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
num=1;
}
else if(num==1){
document.getElementById('navlnk').style.color = "black";
document.getElementById('navlnk1').style.color = "#CCC";
document.getElementById("details").style.display="none";
document.getElementById("person").style.display="block";
document.getElementById("back").disabled = true;
}
}
</script>
1 answers
solution1
0 2017-04-17 06:47:53
Hi i have tried workaround for your requirement... Please try it and let us know.
var width = 40; function move(data) { var elem = document.getElementById("myBar"); if(data == 'back' && width != 0){ width = width-10; elem.style.width = width + '%'; }else if(data == 'continue' && width != 100){ width = width+10; elem.style.width = width + '%'; } }
<!DOCTYPE html> <html> <style> #myProgress { width: 100%; background-color: #ddd; } #myBar { width: 40%; height: 30px; background-color: #4CAF50; } </style> <body> <h1>JavaScript Progress Bar</h1> <div id="myProgress"> <div id="myBar"></div> </div> <br> <button onclick="move('back')">Back</button> <button onclick="move('continue')">Continue</button> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Progress bar, max and reset on 100%
how to reset bootstrap progress bar to 0%
How to stop progress bar at 100% in ajax request?
How to reset the progress bar after it ends
How do I set a previously 'disabled' button in an html, to 'enabled', once a progress bar is at 100%?
How to set up a progress bar
How to set progress bar on AjaxUpload?
jQuery progress bar jumps to 100%
How to redirect url when the progress-bar reached 100%
How get a progress bar load body content and hide at 100%?
Related Tags