Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jan 2004
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Disable submit button AND display "hidden" area.

    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!!!
    Last edited by FastCougar; 06-11-2004 at 05:20 PM. Reason: Clarification

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <script>
     function showMe(id) {
      var elem = document.getElementById(id);
      elem.style.visibility = "visible";
      elem.style.display = "block";
     }
    </script>
    ...
    <form ...>
     ...
     <input type="submit" ... onclick="this.disabled=true; showMe('whenSlowMessage');">
     <div id="whenSlowMessage" style="visibility:hidden; display:none;">
      ...
     </div>
    </form>
    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,
    Sadiq.

  • #3
    Regular Coder
    Join Date
    Jan 2004
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I figured it out ... only one small problem!

    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?

    Code:
    <script>
    function showProgress(){document.getElementById('progressRow').style.display = 'inline';
    }
    </script>
    <form name="frmTrackingStep1" method="post" action="tracking_step2.cfm" onsubmit="this.elements['mysub'].disabled=true;return true;">
    <table border="0">
    <tr>
    <td><input type="submit" class="form_submit" value="Search" name="mysub" onclick="showProgress();"></td>
    </tr>
    <tr>
    <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>
    </tr>
    </table>
    </form>

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    That is IE's inherent behavior. Read this thread for more info.

  • #5
    Regular Coder
    Join Date
    Jan 2004
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts

    OK, I think I have found a way around this

    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
    Code:
    <script>
    function disableSubmit(id) {
    	window.status = 'Searching, please wait';
    	document.formName.Submit.disabled = true;
    	document.formName.action = 'action.cfm';
    	document.formName.submit();
    	var elem = document.getElementById(id);
    	elem.style.visibility = 'visible';
    	elem.style.display = 'inline';
    }
    </script>
    Form Tag
    Code:
    <form name="formName" method="post">
    "Submit" button (made a button to circumvent the enter key)
    Code:
    <input type="button" class="formSubmit" value="Search" name="Submit" onclick="disableSubmit('searchMsg');">
    Hidden Message (displayed on form button click)
    Code:
    <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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •