Progress bar / percentage for HTML form submission

Posted on 2005-04-08
Last Modified: 2008-03-17

I am submitting textarea content via HTML form to a server side script. The contents of the text area somtimes contains binary content (content from a client side file editor)
Sometimes the content reaches a size of 500k+

Submitting this size of data in a form takes quiet a while.
What is the best way of displaying some sort of progress to the user?

Perhaps there is a javascript method to see the bytes sent, or something similar?

Question by:richardoc
    LVL 5

    Expert Comment

    You are better off modifying your server side script to do the progressbar. What language is the server side script using - depending on that you will be able to find sample code on various sites.

    If are unable to modify the script then can fake the progress bar by using an animated gif. Once your users click submit display the animated gif.

    Author Comment

    The server-side code is written in ASP.

    Don't think a fake gif is 'going to achieve ny aims' :)
    LVL 5

    Accepted Solution

    Try this tutorial :

    Creating a Progress Bar for use in ASP
    LVL 29

    Assisted Solution

    Here is an example using Server.Transfer in ASP.

    Basically, we move your form processing code below an HTML output.  When the processing is complete, we use server transfer to go to execute the processed OK or processed Error pages, which erase the progess bar and display the appropriate results.

    If your form data processing code can report its progress, then you can use the same method to replace the progress bar with a progress complete message.  (You might need to use Server.Execute in that case, so you do not permanently transfer control away from your form handling page.)

    If your form data processing code can NOT report its progress, then stick with the example.

    ----------------------------------------- form handling page ---------------------------------------------
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
    <!-- -->

    <meta name="author" content="Roderick Divilbiss">
    <meta name="copyright" content="© 2005 Roderick Divilbiss">
    <title>Progess Bar Form Handler</title>

    <body id="oBody">
    Please Wait While Your Data Is Submitted.<br>
    <img border="0" src="progressBar.gif" width="349" height="21">

    ' force the progress bar to be written before the form handling code starts.

    Dim processedOK
    processedOK = false

    '* Process you form data here
    ' simulated.
    Dim idx, i
    for idx = 1 to 10000000
          i = i + idx
    '* pretend success
    processedOK = true

    if processedOK then
    end if      

    ----------------------------------------- form success page - progess_bar_finished.asp ---------------
    <script language="javascript" type="text/javascript">
    document.getElementById('oBody').innerHTML='Thank you for waiting.<p>Your data was submitted successfully.</p>';

    ----------------------------------------- form handling page - progess_bar_error.asp -----------------
    <script language="javascript" type="text/javascript">
    document.getElementById('oBody').innerHTML='There was an error processing your data.<p>Please try again later.</p>';

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
    Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
    This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
    The viewer will learn how to count occurrences of each item in an array.

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now