Progress Bar with Javascript

[steve100]

Hi, I have a piece of javascript code which works with Coldfusion to produce a 'progress meter' which shows graphically how many far someone has progressed through a rather long form.

Basically the code is executed everytime a person moves from one question to the next (using the onBlur attribute). It replaces a white.gif image with a blue.gif image and gives the appearance of a progress bar.

It works fine as long as the user moves from question 1 to question 2 ect in a sequential manner (I have only shown code for the 1st question). The problem is the user might ignore question 1 and answer question 3. In this case document.Block3.src would be set to "../images/blue.gif"; and the 3rd progress bar (but not 1 or 2) is shown as blue. This looks weird and is not how conventional progress bars work.


What I need is a more dynamic solution which will set document.Block1.src to "../images/blue.gif"; WHICHEVER question is selected. I had a go below but I can't get it to work - I know you clever javascript people will probably laugh at how easy it is to get the syntax right!

Thanks
Steve

// Static code looks weird

function progress(f) {

var feedbackform = document.forms['feedbackform'];
var aaq1_have_you_used_about_you = "";


for (i=0; i<feedbackform.aaq1_have_you_used_about_you.length; i++) {
       if (feedbackform.aaq1_have_you_used_about_you[i].checked) {
       
	   document.Block1.src = &quot;../images/blue.gif&quot;;
         }
      }  

<!--- Coldfusion Code to show progress meter  --->

<CFOUTPUT><TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0><TR><TD><TABLE WIDTH=&quot;100&quot; CELLPADDING=0 CELLSPACING=0 BORDER=0><TR><TD>Progress: </TD></CFOUTPUT>
<CFLOOP INDEX=&quot;X&quot; FROM=1 TO=10>
	<CFOUTPUT>
	<TD><IMG SRC=&quot;images/white.gif&quot; NAME=&quot;Block#X#&quot; WIDTH=10 HEIGHT=15 ALT=&quot;Progress Bar&quot;></TD>
	</CFOUTPUT>
</CFLOOP>
<CFOUTPUT></TR></TABLE></TD></TR></TABLE><P></CFOUTPUT>
<CFFLUSH>


//My attempt at dynamic code

function progress(f) {

var feedbackform = document.forms['feedbackform'];
var aaq1_have_you_used_about_you = &quot;&quot;;
var bbq1_now_have_clearer_understanding_of_own_experience = &quot;&quot;;
var BlockNumber = 0;


for (i=0; i<feedbackform.aaq1_have_you_used_about_you.length; i++) {
       if (feedbackform.aaq1_have_you_used_about_you[i].checked) {
       BlockNumber = BlockNumber +1; //try to increment BlockNumber so that whichever question is attempted the progress meter always increments in sequence
	   document.Block+BlockNumber.src = &quot;../images/blue.gif&quot; // display next blue block in progress bar;
         }
      }

 

[tviman]

A simple answer would be to test the value/length/status of the previous field/checkbox/radio button. In other words, when focus is moved from #1 to #3, test value of #2 before replacing gif images. If #2 is not "empty" the the assumption can be made that the white gif has already been replaces with the blue gif. Otherwise, place #2 blue gif in it's proper location.

There's always a better way. The fun is trying to find it!