Uploading progress bar on submit

[ismadman]

First off , I LOVE THIS PROGRAM
Have played with it a couple of days and found was you have created the basics
The possibilities are endless .
BUT , My question is
Does anyone know how to get an uploading progress bar to display
PROPERLY once submit is entered?
I found one that works if all the content is validated for eg .
[code]
          <img src="http://404webdesigns.com/images/processing-bar.gif" name="pic" id="pic" style="display: none;"/>
          <input id="saveForm" class="mainForm" type="submit" value="Submit" onClick="document.getElementById('pic').style.display='inline';" />   
[/code]

But if submit was clicked it would activate the load.gif after one click making the form look like it was doing something when it wasnt .

So I tried this for eg:
[code]

<img src="http://www.wallpaperama.com/images/processing-bar.gif" alt="" border="0" name = "loading" id = "loading" style = "display: none;">

<input id="saveForm" class="mainForm" type="submit" value="Submit" onclick = "this.style.display = 'none'; loading.style.display = '';">

And this worked although same again . Unless the form was complete the submit button would disappear and be replaced with the load.gif rendering form submission impossible if you made a mistake .

I have searched for 3 days high and low for answers and thought i'd ask here if anyone new where to place the load.gif to make it look like something is happening (ie: uploading ) instead of looking frozen .

I know i'm missing something but all the other code i've looked at to me ( newb ) is far removed from anything in these scripts so placement is awkward .
I know it validates , and so if it validates true I want to see the load.gif over or near the submit button .
I have tried here
[code]
<form method=post enctype=multipart/form-data action=processor.php onSubmit="return validatePage1();"><ul class=mainForm id="mainForm_1">
[/code]
as well ( which I thought would be the obvious place )

You can view the page with the first edit here
http://404webdesigns.com/forms/sales/form.html

If you click submit without entering anything , After the alert and look beside the submit button and you will see what i mean .

Another thing . Why if you input the captcha image wrong does it take you to a blank page with INVALID CAPTCHA IMAGE ? Is there any way of keeping it on the same page so you dont have to click back etc? Shouldnt it just be a pop up ?

Lots more questions but this is the most important one ( progress bar )
So any help or guidance of where and what  to input into my code would be GREATLY APPRECIATED :)
Thanks
(PS ....HELP lol)

[ismadman]

Sorry load.gif was meant to be processing-bar.gif
(too many beers hahaha)

[ismadman]

Ok I had to take that edit out
But can anyone help still ?
I need a progress bar onsubmit
if its not uploading anything than you won't obviously see it
but if its taking a while i want something showing that its still working
I have an animated gif which would do
Anyone ?

[TNTEverett]

This is not a simple problem and most solutions I have seen are not accurate. 
Simple:
http://db.org/demo/2003/02/17/progress-bar/
Not So Simple But Full Featured:
http://developer.yahoo.com/yui/examples/uploader/uploader-advanced.html
There are literally hundreds of examples on the web, some free some not, some work some don't, some are easy some are not. 
Personally I have chosen not to implement progress bars.  For most purposes files are small and the work required to do a good job can not be justified. 

[ismadman]

Thanks for the reply tnteveret1 .
I have already implemented one which worked .
I dont need a progress bar persay , but I need a animation implying the page hasn't frozen.
This is the one I used:-
http://www.wallpaperama.com/forums/javascript-hide-submit-button-in-html-form-t7023.html
i implemented it in my form.html
Like so

          <img src="http://404webdesigns.com/images/processing-bar.gif" name="pic" id="pic" style="display: none;"/>
          <input id="saveForm" class="mainForm" type="submit" value="Submit" onClick="document.getElementById('pic').style.display='inline';" /> 

I put that in replace of the submit section under the captcha section

Works like a treat , ONLY if you have all fields filled in that are REQUIRED
if not the pop up displays telling you to fix the fields which is normal
But because it didnt submit , Now the submit button is gone with the animation in its place
So what I am asking is not for any complicated upload bar etc
just an Image (animated ) to display where the submit button is when ALL fields are filled out correctly .
As I said , The one I posted above works perfectly if everything is filled in as REQUIRED *
I just can't find where to place the code in the file so when it has validated ( All fields are correctly filled ) it will display the image/animation . And only then .
This is a simple edit
I just need advice on where to place it so it works
Any ideas . I am trying to explain myself as best I can
So any questions , I will be happy to answer as I really want this to work
Why ? Because Im useless at php hahah
Thanks

[ismadman]

Here is my form.html
----------------------------------------------------------
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
<head>
<title>Shower Repair Centre Enquiry Form - Help us help you !</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="style.css" rel="stylesheet" type="text/css" />
        <!-- calendar stuff -->
              <link rel="stylesheet" type="text/css" href="calendar/calendar-blue2.css" />
              <script type="text/javascript" src="calendar/calendar.js"></script>
              <script type="text/javascript" src="calendar/calendar-en.js"></script>
              <script type="text/javascript" src="calendar/calendar-setup.js"></script>
        <!-- END calendar stuff -->

        <!-- expand/collapse function -->
        <SCRIPT type=text/javascript>
        <!--
        function collapseElem(obj)
        {
            var el = document.getElementById(obj);
            el.style.display = 'none';
        }

        function expandElem(obj)
        {
            var el = document.getElementById(obj);
            el.style.display = '';
        }

        //-->
        </SCRIPT>
        <!-- expand/collapse function -->

        <!-- expand/collapse function -->
            <SCRIPT type=text/javascript>
            <!--

            // collapse all elements, except the first one
            function collapseAll()
            {
                var numFormPages = 1;

                for(i=2; i <= numFormPages; i++)
                {
                    currPageId = ('mainForm_' + i);
                    collapseElem(currPageId);
                }
            }

            //-->
            </SCRIPT>
        <!-- expand/collapse function -->

         <!-- validate -->
<SCRIPT type=text/javascript>
        <!--
            function validateField(fieldId, fieldBoxId, fieldType, required)
            {
                fieldBox = document.getElementById(fieldBoxId);
                fieldObj = document.getElementById(fieldId);

                if(fieldType == 'text'  ||  fieldType == 'textarea'  ||  fieldType == 'password'  ||  fieldType == 'file'  ||  fieldType == 'phone'  || fieldType == 'website')
                {   
                    if(required == 1 && fieldObj.value == '')
                    {
                        fieldObj.setAttribute("class","mainFormError");
                        fieldObj.setAttribute("className","mainFormError");
                        fieldObj.focus();
                        return false;                   
                    }

                }

                else if(fieldType == 'menu'  || fieldType == 'country'  || fieldType == 'state')
                {   
                    if(required == 1 && fieldObj.selectedIndex == 0)
                    {               
                        fieldObj.setAttribute("class","mainFormError");
                        fieldObj.setAttribute("className","mainFormError");
                        fieldObj.focus();
                        return false;                   
                    }

                }

                else if(fieldType == 'email')
                {   
                    if((required == 1 && fieldObj.value=='')  ||  (fieldObj.value!=''  && !validate_email(fieldObj.value)))
                    {               
                        fieldObj.setAttribute("class","mainFormError");
                        fieldObj.setAttribute("className","mainFormError");
                        fieldObj.focus();
                        return false;                   
                    }

                }

            }

            function validate_email(emailStr)
            {       
                apos=emailStr.indexOf("@");
                dotpos=emailStr.lastIndexOf(".");

                if (apos<1||dotpos-apos<2)
                {
                    return false;
                }
                else
                {
                    return true;
                }
            }

            function validateDate(fieldId, fieldBoxId, fieldType, required,  minDateStr, maxDateStr)
            {
                retValue = true;

                fieldBox = document.getElementById(fieldBoxId);
                fieldObj = document.getElementById(fieldId);   
                dateStr = fieldObj.value;

                if(required == 0  && dateStr == '')
                {
                    return true;
                           
                }

                if(dateStr.charAt(2) != '/'  || dateStr.charAt(5) != '/' || dateStr.length != 10)
                {
                    retValue = false;
                }   

                else    // format's okay; check max, min
                {
                    currDays = parseInt(dateStr.substr(0,2),10) + parseInt(dateStr.substr(3,2),10)*30  + parseInt(dateStr.substr(6,4),10)*365;
                    //alert(currDays);

                    if(maxDateStr != '')
                    {
                        maxDays = parseInt(maxDateStr.substr(0,2),10) + parseInt(maxDateStr.substr(3,2),10)*30  + parseInt(maxDateStr.substr(6,4),10)*365;
                        //alert(maxDays);
                        if(currDays > maxDays)
                            retValue = false;
                    }

                    if(minDateStr != '')
                    {
                        minDays = parseInt(minDateStr.substr(0,2),10) + parseInt(minDateStr.substr(3,2),10)*30  + parseInt(minDateStr.substr(6,4),10)*365;
                        //alert(minDays);
                        if(currDays < minDays)
                            retValue = false;
                    }
                }

                if(retValue == false)
                {
                    fieldObj.setAttribute("class","mainFormError");
                    fieldObj.setAttribute("className","mainFormError");
                    fieldObj.focus();
                    return false;
                }
            }
        //-->
        </SCRIPT>
        <!-- end validate -->

    <style type="text/css">
<!--
#mainForm #formHeader .formInfo .active {
    font-size: 18px;
}
.footer {
    text-align: center;
}
-->
    </style>
    </head>

    <body onLoad="collapseAll()">
    <div class="mainForm">
      <div id="formHeader2">
      <img src="../../images/logo4email.jpg" width="800" height="203" /></div>
    </div>
    <div id="mainForm">
        <div id="formHeader">
          <p class="formInfo"><span class="active"><span class="emptyrow"><span class="day"><span class="calendarStyle"><span class="button"><span class="ampm">The Shower Repair Centre Enquiry Forum</span></span></span></span></span></span></p>
          <p class="formInfo">Please fill in as much information as you can to let us best deal with your enquiry .</p>
                <p class="formInfo">The fields marked with an asterix * are required . </p>
</div>

        <BR/><!-- begin form -->
        <form method=post enctype=multipart/form-data action=processor.php onSubmit="return validatePage1();"><ul class=mainForm id="mainForm_1">

                <li class="mainForm" id="fieldBox_1">
                    <label class="formFieldQuestion">Title</label><select class=mainForm name=field_1 id=field_1><option value=''></option><option value="Mr" selected>Mr</option><option value="Mrs">Mrs</option><option value="Miss">Miss</option><option value="Ms">Ms</option></select></li>

          <li class="mainForm" id="fieldBox_2">
<label class="formFieldQuestion">First Name&nbsp;*</label><input class=mainForm type=text name=field_2 id=field_2 size='70' value='' /></li>

                <li class="mainForm" id="fieldBox_3">
                    <label class="formFieldQuestion">Surname&nbsp;*</label><input class=mainForm type=text name=field_3 id=field_3 size='70' value='' /></li>

                <li class="mainForm" id="fieldBox_4">
                    <label class="formFieldQuestion">Address</label><input class=mainForm type=text name=field_4 id=field_4 size='70' value='' /></li>

                <li class="mainForm" id="fieldBox_5">
                    <label class="formFieldQuestion">Suburb&nbsp;*</label><input class=mainForm type=text name=field_5 id=field_5 size='70' value='' /></li>

          <li class="mainForm" id="fieldBox_6">
            <label class="formFieldQuestion">Postcode&nbsp;*
              <input class=mainForm type=text name=field_6 id=field_6 size='6' value='' />
            </label>
          </li>

                <li class="mainForm" id="fieldBox_7">
          <label class="formFieldQuestion">State&nbsp;*
            <select class=mainForm name=field_7 id=field_7>
              <option value=''></option>
              <option value="NSW" selected>NSW</option>
              <option value="ACT">ACT</option>
              <option value="VIC">VIC</option>
              <option value="TAS">TAS</option>
              <option value="SA">SA</option>
              <option value="WA">WA</option>
              <option value="NT">NT</option>
              <option value="QLD">QLD</option>
            </select>
          </label>
          </li>

                <li class="mainForm" id="fieldBox_8">
          <label class="formFieldQuestion">Home Phone
            <input class=mainForm type=phone name=field_8 id=field_8 size=70 value="" style="background-image:url(imgs/phone.png); background-repeat: no-repeat;  padding: 2px 2px 2px 25px;" />
          </label>
          </li>

                <li class="mainForm" id="fieldBox_9">
                    <label class="formFieldQuestion">Mobile Phone
                      <input class=mainForm type=phone name=field_9 id=field_9 size=70 value="" style="background-image:url(imgs/phone.png); background-repeat: no-repeat;  padding: 2px 2px 2px 25px;" />
                    </label>
                    <label class="formFieldQuestion">Best time to contact you ?&nbsp;<a class=info href=#><img src=imgs/tip_small.png border=0 /><span class=infobox>Please tell us the best time to contact you .</span></a>
                      <select class=mainForm name=field_13 id=field_13>
                        <option value=''></option>
                        <option value="AM">AM</option>
                        <option value="PM" selected>PM</option>
                      </select>
                    </label>
                </li>

                <li class="mainForm" id="fieldBox_10">
    <label class="formFieldQuestion">Fax
      <input class=mainForm type=phone name=field_10 id=field_10 size=70 value="" style="background-image:url(imgs/phone.png); background-repeat: no-repeat;  padding: 2px 2px 2px 25px;" />
    </label>
          </li>

                <li class="mainForm" id="fieldBox_11">
                  <label class="formFieldQuestion">Allow Email Correspondence&nbsp;*
                    <select class=mainForm name=field_11 id=field_11>
                      <option value=''></option>
                      <option value="Yes" selected>Yes</option>
                      <option value="no">no</option>
                    </select>
                  </label>
                </li>

                <li class="mainForm" id="fieldBox_12">
          <label class="formFieldQuestion">Email Address&nbsp;*
            <input class=mainForm type=email name=field_12 id=field_12 size=70 value="" style="background-image:url(imgs/email.png); background-repeat: no-repeat;  padding: 2px 2px 2px 25px;" />
          </label>
          </li>

          <li class="mainForm" id="fieldBox_13">
            <label class="formFieldQuestion">Enquiry Description&nbsp;<a class=info href=#><img src=imgs/tip_small.png border=0 /><span class=infobox>Sum up your enquiry with a title of choice</span></a>
              <select class=mainForm name=field_14 id=field_14>
                <option value=''></option>
                <option value="None">None</option>
                <option value="Shower Repair">Shower Repair</option>
                <option value="Bath Repairs">Bath Repairs</option>
                <option value="Tiles">Tiles</option>
                <option value="Feedback">Feedback</option>
                <option value="Quotes">Quotes</option>
                <option value="Pricing">Pricing</option>
                <option value="Send Me Info">Send Me Info</option>
                <option value="Call Me Please">Call Me Please</option>
              </select>
            </label>
          </li>

                <li class="mainForm" id="fieldBox_15">
<label class="formFieldQuestion">Comments&nbsp;*&nbsp;<a class=info href=#><img src=imgs/tip_small.png border=0 /><span class=infobox>Please Describe your enquiry in as much detail as possible .</span></a></label><textarea class=mainForm  name=field_15 id=field_15 rows=15 cols=60></textarea></li>
                <li class="mainForm"></li>

                <li class="mainForm" id="fieldBox_16">
                    <label class="formFieldQuestion">Upload A Picture ( Max 2MB )&nbsp;<a class=info href=#><img src=imgs/tip_small.png border=0 /><span class=infobox>Upload a picture to assist your enquiry .</span></a>
                      <input class=mainForm type=file name=field_16 id=field_16 value="" />
                      <br />
                    </label>
                </li>

                <li class="mainForm" id="fieldBox_17">
                    <label class="formFieldQuestion">Subscribe to Customer Newsletter&nbsp;<a class=info href=#><img src=imgs/tip_small.png border=0 /><span class=infobox>Let us keep you informed of the latest news </span></a>
                      <select class=mainForm name=field_17 id=field_17>
                        <option value=''></option>
                        <option value="Yes" selected>Yes</option>
                        <option value="No">No</option>
                      </select>
                    </label>
                </li>

                <li class="mainForm" id="fieldBox_18">
          <label class="formFieldQuestion">Subscribe to Industry Newsletter
            <select class=mainForm name=field_18 id=field_18>
              <option value=''></option>
              <option value="Yes" selected>Yes</option>
              <option value="No">No</option>
            </select>
          </label>
          </li>
       
       
        <!-- end of this page -->

        <!-- page validation -->
        <SCRIPT type=text/javascript>
        <!--
            function validatePage1()
            {
                retVal = true;
if (validateField('field_1','fieldBox_1','menu',0) == false)
retVal=false;
if (validateField('field_2','fieldBox_2','text',1) == false)
retVal=false;
if (validateField('field_3','fieldBox_3','text',1) == false)
retVal=false;
if (validateField('field_4','fieldBox_4','text',0) == false)
retVal=false;
if (validateField('field_5','fieldBox_5','text',1) == false)
retVal=false;
if (validateField('field_6','fieldBox_6','text',1) == false)
retVal=false;
if (validateField('field_7','fieldBox_7','menu',1) == false)
retVal=false;
if (validateField('field_8','fieldBox_8','phone',0) == false)
retVal=false;
if (validateField('field_9','fieldBox_9','phone',0) == false)
retVal=false;
if (validateField('field_10','fieldBox_10','phone',0) == false)
retVal=false;
if (validateField('field_11','fieldBox_11','menu',1) == false)
retVal=false;
if (validateField('field_12','fieldBox_12','email',1) == false)
retVal=false;
if (validateField('field_13','fieldBox_13','menu',0) == false)
retVal=false;
if (validateField('field_14','fieldBox_14','menu',0) == false)
retVal=false;
if (validateField('field_15','fieldBox_15','textarea',1) == false)
retVal=false;
if (validateField('field_16','fieldBox_16','file',0) == false)
retVal=false;
if (validateField('field_17','fieldBox_17','menu',0) == false)
retVal=false;
if (validateField('field_18','fieldBox_18','menu',0) == false)
retVal=false;
               
                if(retVal == false)
                {
                    alert('Please correct the errors.  Fields marked with an asterisk (*) are required');
                    return false;
                }
                return retVal;
            }
        //-->
        </SCRIPT>

        <!-- end page validaton -->

        <!-- next page buttons --><li class="mainForm">
                                <label class="formFieldQuestion">
                                    Type the following:&nbsp;<a class=info href=#><img src=imgs/tip_small.png border=0 /><span class=infobox>For security purposes, please type the letters in the image.</span></a><BR /><img src="CaptchaSecurityImages.php" />
                                  <input id="captchaForm" name="security_code" class="mainForm" type="text"/>
                                </label>
        </li><li class="mainForm">
          <div align="center"><span class="footer">
          <img src="http://404webdesigns.com/images/processing-bar.gif" name="pic" id="pic" style="display: none;"/>
          <input id="saveForm" class="mainForm" type="submit" value="Submit" onClick="document.getElementById('pic').style.display='inline';" />        
          </span></div>
                  </li>
        <li class="mainForm">        </li>
        </ul>
</form>
            <!-- end of form -->
        <!-- close the display stuff for this page -->
        </div>

    </body>
    </html>