Progress bar on a Form – percentage complete

@jonwinterJul 28.2005

[FONT=Tahoma]Can you help? I’ve been searching the forum for a progress bar that tells you how much of a form has been completed by a user as they answer questions.

You probably all seen the or filled out the forms where you answer a few questions, then click a button to continue on to some more questions and a small percentage indicator appears at the top, telling you how far you’re into the form.

I have a form that does exactly this, you answer 10 questions, click next, and then another 10 questions appear and so on….

(The form uses a javascipt function where all the form is hidden initially and as the user clicks to start or presses next, certain parts of it as shown and others hidden etc.)

Can anyone provide a script that calculates the percentage complete and shows it as a small vertical bar?

You’ll be a life saver if you can!! ? [/FONT]

to post a comment

JavaScript

22 Comments(s) _↴

@bathurst_guyJul 28.2005 — #couldnt you just set a variable with an initial value of 0, then as each section is completed (say 10 sections) increment the var. then something like, if var = 1 document.write and all the things to make it 10%, then next section 2 - 20% etc. There would be so so so many different ways to do this. First find out exactly what you want, just a text box with the percent written in it, images to make it look fancier, etc etc etc...

@KorJul 28.2005 — #we have to see a part of your code... How is your questionaire? Has radio buttons, has checkboxes? has text fields? has boxt lists?

@LeeUJul 28.2005 — #If someone writes a script for this I would be happy to post it on [URL=http://javascript.internet.com/]JavaScript Source[/URL]

@KorJul 28.2005 — #I will be honoured... But I guess that it can not be very usefull, as this kinda code is to be very personalized, as it depends on which kinda elements' types has the form.

@LeeUJul 28.2005 — #Perhaps a generic one (for JSS), i.e. name, address, city, state, zip, email, etc. (I didn't mean to change the focus of the discussion - you can send me a PM with your ideas.)

@KorJul 28.2005 — #ok, here's a quick made basic example:

[code=php]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <title>Untitled Document</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <script type="text/javascript">
 var bgF ='#FF0000';
 var bgL ='#FFFFFF';
 function progB(){
 var outH=document.getElementById('barout').offsetHeight;
 var aInp = document.getElementsByTagName('input');
 var aTxt = [];
 for(var i=aInp.length-1;i>=0;i--){
 if(aInp[i].type=='text'){aTxt[aTxt.length]=aInp[i]}
 }
 var txL=aTxt.length; var txF=0;
 for(var i=aTxt.length-1;i>=0;i--){
 if(aTxt[i].value.length>0){txF++}
 }
 var inH=Math.floor(outH*(txF/txL));
 var pBar=document.getElementById('barin');
 pBar.style.height=inH+'px';
 pBar.style.backgroundColor=(txF==0)?bgL:bgF;
 }
 </script>
 <style type="text/css">
 <!--
 #barout {
 border: 1px solid #FF0000;
 height: 140px;
 width: 20px;
 }
 #barin {
 width: 100%;
 }
 -->
 </style>
 </head>
 <body>
 <form>
 <table width="300" border="0" cellspacing="0" cellpadding="0">
 <tr> 
 <td width="20" rowspan="7" valign="top"><div id="barout">
 <div id="barin">&nbsp;</div>
 </div></td>
 <td bgcolor="#f5f5f5">&nbsp; 
 <input type="text" onkeyup="progB()"></td>
 </tr>
 <tr> 
 <td bgcolor="#f5f5f5">&nbsp; 
 <input type="text" onkeyup="progB()"></td>
 </tr>
 <tr> 
 <td bgcolor="#f5f5f5">&nbsp; 
 <input type="text" onkeyup="progB()"></td>
 </tr>
 <tr> 
 <td bgcolor="#f5f5f5">&nbsp; 
 <input type="text" onkeyup="progB()"></td>
 </tr>
 <tr> 
 <td bgcolor="#f5f5f5">&nbsp; 
 <input type="text" onkeyup="progB()"></td>
 </tr>
 <tr> 
 <td bgcolor="#f5f5f5">&nbsp; 
 <input type="text" onkeyup="progB()"></td>
 </tr>
 <tr> 
 <td bgcolor="#f5f5f5">&nbsp; 
 <input type="text" onkeyup="progB()"></td>
 </tr>
 </table>
 </form>
 </body>
 </html>
 [/code]

@MongusJul 28.2005 — #Here's a generic one I just whipped up for you:

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Progress Bar Example&lt;/title&gt;
 &lt;style type="text/css"&gt;
 #progressDiv { width:400px;height:50px;background:#ccc;color:#333;font-family:sans-serif;font-size:20px;font-weight:bold;position:relative;top:0;left:0; }
 #progressDivText { margin-top:15px;position:absolute;left:0;height:100%;text-align:center; }
 #progressBar { width:0%;height:100%;background:#333;color:#ccc;text-align:center;overflow:hidden;position:relative;left:0; }
 #progressBarText { margin-top:15px;position:absolute;left:0;height:100%;text-align:center; }
 &lt;/style&gt;
 &lt;script type="text/javascript"&gt;
 function setProgress(percent)
 {
 percent = Math.max(0, Math.min(100, Number(percent)));
 
 <i>    </i>percent = percent.toFixed(1);
 
 <i>    </i>var progressBar = document.getElementById("progressBar");
 <i>    </i>var text = percent + "% Complete";
 
 <i>    </i>progressBar.style.width = percent + "%";
 <i>    </i>setProgressText("progressBarText", text);
 <i>    </i>setProgressText("progressDivText", text);
 }
 
 function setProgressText(id, text)
 {
 var div = document.getElementById(id);
 
 <i>    </i>if (!div.style.width)
 <i>    </i>    div.style.width = document.getElementById("progressDiv").offsetWidth + "px";
 
 <i>    </i>var textNode = document.createTextNode(text);
 
 <i>    </i>if (div.firstChild)
 <i>    </i>    div.replaceChild(textNode, div.firstChild);
 <i>    </i>else
 <i>    </i>    div.appendChild(textNode);
 }
 
 var p = 0;
 
 function demo()
 {
 p += 0.1;
 
 <i>    </i>if (p &gt; 100)
 <i>    </i>    p = 0;
 
 <i>    </i>setProgress(p);
 }
 
 setInterval('demo()', 100);
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id="progressDiv"&gt;&lt;div id="progressDivText"&gt;&lt;/div&gt;&lt;div id="progressBar"&gt;&lt;div id="progressBarText"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Tested on Firefox and Opera. Didn't have IE available to test (kids have my laptop).

[COLOR=Red][B]Update: CSS Fixed for IE![/B][/COLOR]

@MongusJul 28.2005 — #Didn't work as intended on IE. I should know better than to post without testing on IE. :rolleyes:

This CSS update fixes it (code in previous post was edited to reflect changes):

<i>
 </i>#progressDiv { width:400px;height:50px;background:#ccc;color:#333;font-family:sans-serif;font-size:20px;font-weight:bold;position:relative;top:0;left:0; }
 #progressDivText { margin-top:15px;position:absolute;left:0;height:100%;text-align:center; }
 #progressBar { width:0%;height:100%;background:#333;color:#ccc;text-align:center;overflow:hidden;position:relative;left:0; }
 #progressBarText { margin-top:15px;position:absolute;left:0;height:100%;text-align:center; }

@KorJul 29.2005 — #that's nice Mongus, but I am affraid that is not quite what LeeU wants. It was about a "sort of" progress bar which is to mark visualy how much of a form was completed by a user.

@jonwinterauthorJul 29.2005 — #So far I'm liking the look of the code that's being generated, especially Mongus's version. What I need it to do is somehow work with the small cutdown version of my form (see code below) and not automatically count up as you've got it doing in the demo. If you are able to make it so that when the user clicks on the continue button, the bar increments a certain percentage until it reaches 100% on the last page.

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
 <html>
 <head>
 <title>Demo form</title>
 <script>
 /***********************************************
 * Multi-Part Content script- © Dynamic Drive (www.dynamicdrive.com)
 * This notice must stay intact for use
 * Visit http://www.dynamicdrive.com/ for full source code
 ***********************************************/
 
 if (document.getElementById){
 document.write('<style type="text/css">')
 document.write('.multiparts, #formnavigation{display:none;}')
 document.write('</style>')
 }
 
 var curpart=0
 
 function getElementbyClass(classname){
 partscollect=new Array()
 
 var inc=0
 var alltags=document.all? document.all : document.getElementsByTagName("*")
 for (i=0; i<alltags.length; i++){
 if (alltags[i].className==classname)
 partscollect[inc++]=alltags[i]
 }
 }
 
 function cycleforward(){
 partscollect[curpart].style.display="none"
 curpart=(curpart<partscollect.length-1)? curpart+1 : 0
 partscollect[curpart].style.display="block"
 updatenav()
 self.scrollTo(0, 330)
 }
 
 function cycleback(){
 partscollect[curpart].style.display="none"
 curpart=(curpart>0)? curpart-1 : partscollect.length-1
 partscollect[curpart].style.display="block"
 updatenav()
 self.scrollTo(0, 330)
 }
 
 
 function updatenav(){
 document.getElementById("backbutton").style.visibility=(curpart==0)? "hidden" : "visible"
 document.getElementById("forwardbutton").style.visibility=(curpart==partscollect.length-1)? "hidden" : "visible"
 }
 
 function onloadfunct(){
 getElementbyClass("multiparts")
 partscollect[0].style.display="block"
 document.getElementById("formnavigation").style.display="block"
 updatenav()
 }
 
 if (window.addEventListener)
 window.addEventListener("load", onloadfunct, false)
 else if (window.attachEvent)
 window.attachEvent("onload", onloadfunct)
 else if (document.getElementById)
 window.onload=onloadfunct
 </script>
 </head>
 
 <body>
 <form action="barometerSubmit.asp" method="post" name="barometerForm" id="barometerForm" onSubmit="return validateForm(this);">
 <div class="multiparts" style="display: block"> 
 <table width="95%" border="0" cellpadding="0" cellspacing="0" class="formtable"> 

 <tr> 
 <td class="label">(1) How many issues of In Focus do you receive?</td>
 </tr>
 <tr>
 <td class="options">
 <ul class="radio">
 <li><input type="radio" name="q01" value="all">all</li>
 <li><input type="radio" name="q01" value="most">most</li>
 <li><input type="radio" name="q01" value="some">some</li>
 <li><input type="radio" name="q01" value="none">none</li>
 </ul>
 </td>
 </tr>
 <tr>
 <td class="label">(2) How much of each issue do you read?</td>
 </tr>
 <tr>
 <td class="options">
 <ul class="radio">
 <li><input type="radio" name="q02" value="all">all</li>
 <li><input type="radio" name="q02" value="most">most</li>
 <li><input type="radio" name="q02" value="some">some</li>
 <li><input type="radio" name="q02" value="none">none</li>
 </ul>
 </td>
 </tr>
 </table>
 </div>
 <div class="multiparts">
 <table width="95%" border="0" cellpadding="0" cellspacing="0" class="formtable">
 <tr>
 <td class="label">(3) How well written do you find the articles?</td>
 </tr>
 <tr>
 <td class="options">
 <ul class="radio">
 <li><input type="radio" name="q03" value="very well">very well</li>
 <li><input type="radio" name="q03" value="well">well</li>
 <li><input type="radio" name="q03" value="fairly well">fairly well</li>
 <li><input type="radio" name="q03" value="not very well">not very well</li>
 </ul>
 </td>
 </tr>
 <tr>
 <td class="label">(4) How well designed do you find the publication?</td>
 </tr>
 <tr>
 <td class="options">
 <ul class="radio">
 <li><input type="radio" name="q04" value="very well">very well</li>
 <li><input type="radio" name="q04" value="well">well</li>
 <li><input type="radio" name="q04" value="fairly well">fairly well</li>
 <li><input type="radio" name="q04" value="not very well">not very well</li>
 </ul>
 </td>
 </tr>
 </table>
 </div>
 <div class="multiparts">
 <table width="95%" border="0" cellpadding="0" cellspacing="0" class="formtable">
 <tr>
 <td class="label">(5) How well do you find the publication keeps you informed?</td>
 </tr>
 <tr>
 <td class="options">
 <ul class="radio">
 <li><input type="radio" name="q05" value="very well">very well</li>
 <li><input type="radio" name="q05" value="well">well</li>
 <li><input type="radio" name="q05" value="fairly well">fairly well</li>
 <li><input type="radio" name="q05" value="not very well">not very well</li>
 </ul>
 </td>
 </tr>
 <tr>
 <td class="label">(6) Some initial feedback has suggested that there should be an increased focus on supervision topics. Do you agree?</td>
 </tr>
 <tr>
 <td class="options">
 <ul class="radio">
 <li><input type="radio" name="q06" value="yes">yes</li>
 <li><input type="radio" name="q06" value="no">no</li>
 <li><input type="radio" name="q06" value="don't mind">don't mind</li>
 </ul>
 </td>
 </tr>
 <tr>
 <td class="label">(7) The style and content of In Focus was heavily revised at the end of 2004. Is it an improvement?</td>
 </tr>
 </table>
 </div>
 <div class="multiparts">
 <table width="95%" border="0" cellpadding="0" cellspacing="0" class="formtable">
 <tr>
 <td class="options">
 <ul class="radio">
 <li><input type="radio" name="q07" value="yes very">yes very</li>
 <li><input type="radio" name="q07" value="yes fairly">yes fairly</li>
 <li><input type="radio" name="q07" value="not much">not much</li>
 <li><input type="radio" name="q07" value="no">no</li>
 <li><input type="radio" name="q07" value="not in RMBU prior to 2005">not in RMBU prior to 2005</li>
 </ul>
 </td>
 </tr>
 <tr>
 <td class="label">(8) Overall how well do you find In Focus does as a staff magazine?</td>
 </tr>
 <tr>
 <td class="options">
 <ul class="radio">
 <li><input type="radio" name="q08" value="very well">very well</li>
 <li><input type="radio" name="q08" value="well">well</li>
 <li><input type="radio" name="q08" value="fairly well">fairly well</li>
 <li><input type="radio" name="q08" value="not very well">not very well</li>
 </ul>
 </td>
 </tr>
 </table>
 <input type="submit" value="Submit" class="submit" alt="Submit your answers">
 </div>
 <div id="formnavigation" style="width:200px; display:none;margin-top:10px;">
 <a id="backbutton" href="javascript:cycleback()" style="float:left;cursor:hand;">Previous</a>
 <a id="forwardbutton" href="javascript:cycleforward()" style="float:right;cursor:hand;">Continue</a>
 </div>
 </body>
 </html>[/CODE]

@Jonny_LangJul 29.2005 — #.....

@jonwinterauthorJul 29.2005 — #Jonny,

This is good but where I work, we aren't allowed to use ActiveX functionality on our browsers because of security controls. Because of this, I wouldn't strongly suggest using it too often in case other people have the same policy where they work. Apart from that I would assume it looked pretty good! ?)

@Jonny_LangJul 29.2005 — #Jon:

You are assuming you will receive the "usual" ActiveX warning, usually involving the File System Object. The Progress Bar does not cause the warning. But, not going to beg you... And I don't care what you "strongly suggest." I won't change what I do, or how I do it, not for you, not for anyone.

@jonwinterauthorJul 29.2005 — #Blimey! Climb down off that high horse and join the real world! I am not trying to insult your abilities and not really interested in what you can or can't do. All I am trying to gain is some help from people who can show me if it possible to do what I requested. Things have looked good so far, including your version, but I haven't seen the 'definitive' version yet. It does seem that what I have requested hasn't been made public for others to use and I'd hope someone creates a fantastic piece of code that everyone will want to use and love.

Forgive me If I offended you but that isn't my aim!

@Jonny_LangJul 29.2005 — #.....

@jonwinterauthorJul 29.2005 — #If this is how silly you're going to become then my conversation with you end here.

Apologies to anyone else reading these comments but there is little I can do if someone decides to read into every comment I write, assuming I am trying to put them down. I'm not!

Hopefully we can just carry on this thread in the sensible manner it started with....

@MongusJul 29.2005 — #To stop my progress bar from automatically incrementing you just have to remove these lines:

<i>
 </i>var p = 0;
 
 function demo()
 {
 p += 0.1;
 
 <i>    </i>if (p &gt; 100)
 <i>    </i>    p = 0;
 
 <i>    </i>setProgress(p);
 }
 
 setInterval('demo()', 100);

The lines are only in there to provide an example of how to use the progress bar.

All you have to do is call setProgress() with the percentage you want to set it to.

<i>
 </i>setProgress(33.3);

@ddwhiteJul 30.2005 — #I'm confused. Why not just use a table and change the background of cells as the form gets filled in:

<table width=100% border=1><tr><td valign=top><table width=100% border=0>
   <td valign=top id=1 class=first>&nbsp;</td>
   <td valign=top id=2 class=2>&nbsp;</td>
   <td valign=top id=3 class=3>&nbsp;</td>
  </table></td></tr></table>

and then two quick routines to change the backgrounds and increment a variable:

var myclass=0;

function addthermometer(){

myclass=myclass+1

document.getElementById(myclass).style.background="red"

}

function minusthermometer(){

document.getElementById(myclass).style.background=""

myclass=myclass-1

}

call the table background routines with the form update routines.

@jonwinterauthorAug 02.2005 — #Mongus, you're a legend! That works really well now and I even created a background linear gradient image, which makes the percentage bar look amazing.

Thanks to you all for the help you given me with this problem and I think I'll be using some of the other suggestions above as they can also work in other forms we have on our systems.

Cheers

Jon

@MongusAug 02.2005 — #Glad I could help. ?

I'd love to see the progress bar in action if you've got it on a public site.

@jonwinterauthorAug 02.2005 — #Unfortunately it's only on our works Intranet site, which is a real shame as I'm sure it's well worth being seen out on the web now you've created this sweet piece of code! ?)

@jonwinterauthorOct 04.2005 — #I'm back again! The percentage complete worked a treat and users love it. What I am trying to do now is use the same idea but this time the percentage complete needs to go vertical not horizontal. I've changed the widths to height and it works fine but the bar starts from the top and works downwards. Ideally I'd like the bar to go up, almost like the one of those 'target to reach' machines so see on game shows. I'm fine with the graphics and look and feel but need the code to match.

Can you help?

Also in #JavaScript _↴

Textbox losing focus causes event?Accessing Restricted areas List of javascript events

Success!

Help @jonwinter spread the word by sharing this article on Twitter...

Tweet This

Progress bar on a Form – percentage complete

22 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Progress bar on a Form – percentage complete

22 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

22 Comments(s) _↴

Also in #JavaScript _↴