View Full Version : Disable submit button AND display faux "progress bar" ...

06-11-2004, 05:45 PM
I'm hoping you guys can help a newbie here. I have a submit button on a form that runs a database query that can take some time to run. So that people don't get frustrated with slow results and try submitting again, I have the form set up to disable the submit button once it is clicked. However, I would also like for a faux progress bar to be displayed on the page. This would be an animated gif that would display when the submit button is pressed (and thus disabled).

1) fill out form fields for query
2) click submit button
3) disable submit button & display hidden area with progress bar & message.

I have the image, and message on the page, but I have no experience making a section of the page appear/disappear. How would I make this message be invisible on the page when it loads, but then be visible when the form is submitted?

Thanks again for your help!!!

06-11-2004, 09:11 PM
Ok I'll need a bit more code/structure to help you out properly, but I can give you an idea.

Let's say this progress bar and message and whatever you want to show up is in a DIV. This is what I'd do:

function showMe(id) {
var elem = document.getElementById(id);
elem.style.visibility = "visible";
elem.style.display = "block";
<form ...>
<input type="submit" ... onclick="this.disabled=true; showMe('whenSlowMessage');">
<div id="whenSlowMessage" style="visibility:hidden; display:none;">

So when the user clicks/presses the submit button, the button will become disabled and anything in that DIV will be shown (become visible).

Hopefully you can apply this example to your code, but if not, post back and I'd be glad to help.

Good luck,

06-11-2004, 09:16 PM
Well, I have it figured out, but now I have a small problem where in IE, the image isn't showing it's animation. In Netscape/Mozilla/FireFox/Opera, the animated gif runs the animations. However, in IE (6.0.2800.1106), the animated gif shows only the first frame. Is this because the form is submitting to another page?

function showProgress(){document.getElementById('progressRow').style.display = 'inline';
<form name="frmTrackingStep1" method="post" action="tracking_step2.cfm" onsubmit="this.elements['mysub'].disabled=true;return true;">
<table border="0">
<td><input type="submit" class="form_submit" value="Search" name="mysub" onclick="showProgress();"></td>
<td><span id="progressRow" style="display:none;"><strong>Searching, please wait</strong>&nbsp;<img src="i/ico_progress_bar.gif" alt="Searching, please wait"></span></td>

06-14-2004, 12:40 PM
That is IE's inherent behavior. Read this thread (http://www.codingforums.com/showthread.php?t=37305&highlight=animation+stops) for more info.

06-14-2004, 04:30 PM
I think that I have found a way around this. Simple really: I have no form action attribute and define the form's action and submit calls in the javascript that is called when the "submt button" is pressed. I know this isn't the best solution, but it will work in my environment because users are not allowed to login if they have javascript disabled. So, I can be 100% sure that all users are using javascript. Below is my code:

Javascript Function
function disableSubmit(id) {
window.status = 'Searching, please wait';
document.formName.Submit.disabled = true;
document.formName.action = 'action.cfm';
var elem = document.getElementById(id);
elem.style.visibility = 'visible';
elem.style.display = 'inline';

Form Tag
<form name="formName" method="post">

"Submit" button (made a button to circumvent the enter key)
<input type="button" class="formSubmit" value="Search" name="Submit" onclick="disableSubmit('searchMsg');">

Hidden Message (displayed on form button click)
<span id="searchMsg" style="visibility:hidden; display:none;"><strong>Searching, please wait</strong>&nbsp;&nbsp;&nbsp<img src="i/ico_progress_bar.gif" alt="Searching, please wait"></span>

So, to conclude:

1) This is a problem with IE 6 (can't test backwards due to lack of machines)
2) Doesn't appear to be an issue in any of the Mozilla based browsers (Netscape 7.x, Mozilla 1.x,) or FireFox. Opera will only display the alt text for the image, regardless of it's format (jpg or giff) ... seperate issue all together.
3) The problem is tied directly to the fact that the form is being submitted via the form's action attribute.

Any animation on the page is frozen on the first frame if a form is submitted using the a submit button and the form's action="" attrubute. This also happens if you use the onsubmit="" attribute, even is you circumvent the action attribute by have javascript submit the form.