Skip to main content
sesmic
sesmic
Level 4
October 2, 2022
解決済み

Progress bar in forms showing the percent of completion.

  • October 2, 2022
  • 3 の返信
  • 1226 ビュー

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

このトピックへの返信は締め切られました。
ベストアンサー Mayank_Gandhi

@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>

3 の返信

Mayank_Gandhi
Adobe Employee
Mayank_GandhiAdobe Employee
Adobe Employee
October 3, 2022

@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.

    sesmic
    sesmic作成者
    Level 4
    October 3, 2022

    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.

      Mayank_Gandhi
      Adobe Employee
      Mayank_GandhiAdobe Employee回答
      Adobe Employee
      October 4, 2022

      @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>
        契約条件Accessibility statement

        Loading footer...