Expand my Community achievements bar.

SOLVED

Progress bar in forms showing the percent of completion.

Avatar

Level 4

Hi all!
I've form with 3 panels & approx. 25-30 fields total. Now, I wanted to create the progress bar for this form that will show the user about the percent of form filled (based on the fields or panels filled). This would also suffice like if the all fields in panel are filled, then tab's color/img should change.
How can I implement this? Any leads would be appreciated.
Regards,
Sesmic

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

@sesmic You can create a custom progress bar and include it on top of the form. With each section, you can increment the value on click on next section.

 

here is the plain HTML code

 

<!DOCTYPE html>
<html>
<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {

  height: 30px;
  background-color: #04AA6D;
}
</style>
<body>

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar" style="width:10%"></div>
</div>

<br>
<button onclick="move()">Click Me</button> 

<script>
 window.i = 0;
function move() {
  if (window.i < 9) {
    	var elem = document.getElementById("myBar");
        alert();
        elem.style.width = parseInt(elem.style.width.substr(0,2)) + 10 +"%";
        alert(elem.style.width);
        window.i++
      }
    
  
}
</script>

</body>
</html>

View solution in original post

3 Replies

Avatar

Employee Advisor

@sesmic Have you tried using tabbed on the left/top panel layout with the survey theme? You don't get percentage but it shows very well the progress and completed sections.

Avatar

Level 4

Thanks for the reply!
I am currently using the similar theme for my form. But want some kind of statics regarding completion of forms. It can be anything like percent/fraction or if all required fields in any panel is filled the tabs color/image should change.

Avatar

Correct answer by
Employee Advisor

@sesmic You can create a custom progress bar and include it on top of the form. With each section, you can increment the value on click on next section.

 

here is the plain HTML code

 

<!DOCTYPE html>
<html>
<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {

  height: 30px;
  background-color: #04AA6D;
}
</style>
<body>

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar" style="width:10%"></div>
</div>

<br>
<button onclick="move()">Click Me</button> 

<script>
 window.i = 0;
function move() {
  if (window.i < 9) {
    	var elem = document.getElementById("myBar");
        alert();
        elem.style.width = parseInt(elem.style.width.substr(0,2)) + 10 +"%";
        alert(elem.style.width);
        window.i++
      }
    
  
}
</script>

</body>
</html>