www.webdeveloper.com
Results 1 to 5 of 5

Thread: Animated GIF - No animation on form submit

  1. #1
    Join Date
    Oct 2008
    Posts
    50

    Animated GIF - No animation on form submit

    I ran into the common problem of GIF's not being animated when they are used to indicate "activity" in AJAX applications.

    I found a post on this board (http://www.webdeveloper.com/forum/showpost.php?p=867389), but the solution in post #12 does not work if the form is being submitted by using the 'Enter' button on the keyboard instead of clicking the 'Submit' button on the page.

    I posted to that thread before I realized it was tagged as "Resolved". Please read through the quote below.

    Here is my post:

    Quote Originally Posted by jeffshead View Post
    Quote Originally Posted by soarchrist View Post
    I found an even better solution to your problems... though this thread is probably too old for anyone to be checking still.

    My animated gift would stop working also... even in firefox. I chose to not use a submit button through the form like i would normally. Instead, I use a input type='button' and have it run a script that shows the loading image... then submits the form. You have to have a double catch.

    Here's my code and it magically works in IE7 and Firefox 2. Notice that the button invokes the showLoader() functions and so does the onSubmit call from the form. This makes the page ASSURE itself the image is shown.

    Code:
    <script language="javascript">
    
    function showLoader() {
    
    	document.upload_form.submitform.disabled = true;
    	document.getElementById("uploader_image").innerHTML = "Please wait...<br><img src='../../images/loading.gif'>";
    	
    }
    function submitForm() {
    	document.upload_form.submit();
    	}
    </script>
    
    <p><form name="upload_form" action="upload_doc_post.php" enctype="multipart/form-data" method="post" onSubmit="showLoader();">
    Give your file a title:<br>
    <input type="text" name="name" size="25" style="height:25px; font-size:22px;"></p>
    <p>Your file: 
    <input type="file" name="uploadfile" size="65"></p>
    <p><input type="button" name="submitform" value="Upload File" onClick="submitForm(); showLoader();">
    </form></p>
    <div id="uploader_image" style="width:90%; height:50px; ">&nbsp;</div>
    I tested this with IE7 and FF3. Works in both, but when pushing the enter button to submit the form, neither browser displays the image. If the button was used to submit the form previously, the image is displayed on subsequent submissions that are done by using the enter button. Even after refreshing the page, the image will display on submissions that are done with the enter button. You have to close the browser and go back to the page to recreate this issue.

    Anyone know how to add the “enter button” functionality for both browsers?

    I thought 'onSubmit="showLoader();' in the form tag was supposed to do that
    Question still stands... Anyone know how to add the “enter button” functionality for both browsers?

    I did notice that the container (<div id="uploader_image" style="width:90%; height:50px; ">&nbsp;</div>) always displays, but the GIF does not. Not even unanimated. I just noticed that the GIF does not always show when the 'Submit' button is used. I also tested with a dial-up connection.

    I even changed the line of code below, but it did not help.

    From:
    Code:
    <p><form name="upload_form" action="upload_doc_post.php" enctype="multipart/form-data" method="post" onSubmit="showLoader();">
    To:
    Code:
    <p><form name="upload_form" action="upload_doc_post.php" enctype="multipart/form-data" method="post" onSubmit="submitForm(); showLoader(); ">
    Last edited by jeffshead; 01-17-2009 at 08:51 AM.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    If you want a <form> to submit when you press ENTER, you need only an <input type="submit"> or <input type="image"> button in your form. I noticed you have a "button" input, but no submit input in your example code.

    You could remove the onclick on the "button", and change it to a "submit". Then you could add an onsubmit event handler to the <form> that does all necessary preprocessing. Returning false from the onsubmit prevents the form from submitting, or returning true allows the form to submit.

  4. #4
    Join Date
    Oct 2008
    Posts
    50
    The code I originally posted is from someone else. I just copied parts of it to my page.

    Here is a quick sample that I put together if anyone wants to test it:

    PHP Code:
    <?php print("
    <html>
    <head>
    </head>
    <body onload=\"document.forms.test_form.test_input.focus()\">
    <center>
    <div class=\"container\">
        
        <script type=\"text/javascript\">
            function showLoader() {
            document.test_form.test_submit.disabled = true;
            document.getElementById('test_container').innerHTML='<br/><img src=\"images/wait.gif\" alt=\"\" />';
            }
            function submitForm() {
            document.test_form.submit();
            }
        </script>
        <form name=\"test_form\" style=\"padding:0px; margin:0px;\" action=\"\" onsubmit=\"showLoader();\" method=\"post\">
            Password:&nbsp;
            <input type=\"password\" name=\"test_input\" />
            <input type=\"button\" name=\"test_submit\" value=\"Login\" onclick=\"submitForm(); showLoader();\" />
        </form>
        <span id=\"test_container\" style=\”border:#333333 solid medium\”></span>
    </div>
    </center>
    </body>
    </html>
    "
    ?>
    I just placed this page on my server and tested it. It acts just like my original page.

    I guess I should apologize for neglecting to mention this code is being "printed" by PHP. However, I have gotten the same exact results when I remove the PHP print function, “escapes” and test as a regular HTML page.

    Here is the code as a regular HTML page:
    HTML Code:
    <html>
    <head>
    </head>
    <body onload="document.forms.test_form.test_input.focus()">
    <center>
    <div class="container">
    	
    	<script type="text/javascript">
    		function showLoader() {
    		document.test_form.test_submit.disabled = true;
    		document.getElementById('test_container').innerHTML='<br/><img src="images/wait.gif" alt="" />';
    		}
    		function submitForm() {
    		document.test_form.submit();
    		}
    	</script>
    	<form name="test_form" style="padding:0px; margin:0px;" action="" onsubmit="showLoader();" method="post">
    		Password:&nbsp;
    		<input type="password" name="test_input" />
    		<input type="button" name="test_submit" value="Login" onclick="submitForm(); showLoader();" />
    	</form>
    	<span id="test_container" style="border:#333333 solid medium"></span>
    </div>
    </center>
    </body>
    </html>

    I don’t understand this, but this is what I have observed:

    The image will not display when submitting with the ‘Login’ button or ‘enter’ on the keyboard; at least not with the first few attempts. If I keep clicking on the ‘Login’ button, the image will appear after a while and keep displaying each time the ‘Login’ button is clicked. It’s as if a certain number of clicks and/or a certain amount of time is needed to make the image display.

    Can someone please test this on their server so you can see what I am talking about?

  5. #5
    Join Date
    Oct 2008
    Posts
    50
    Quote Originally Posted by toicontien View Post
    If you want a <form> to submit when you press ENTER, you need only an <input type="submit"> or <input type="image"> button in your form. I noticed you have a "button" input, but no submit input in your example code.

    You could remove the onclick on the "button", and change it to a "submit". Then you could add an onsubmit event handler to the <form> that does all necessary preprocessing. Returning false from the onsubmit prevents the form from submitting, or returning true allows the form to submit.
    The form already submits when enter is used instead of clicking on the button. However, I tried your recommendation, but it made no difference.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles