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
Solved! Go to Solution.
Views
Replies
Total Likes
@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>
@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.
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.
@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>