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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Show/hide DIV only working in Firefox

    Hello,

    I have the HTML / Javascript code below to show a loading GIF when a form is submitted (using the onsubmit function). The code is only working in Firefox but no other browsers and I can't figure out what I've got wrong. Thank you for any help!!

    Code:
    		<div id="errorModal" class="modal">
    			<div>
    				<h4 class="error">ERROR</h4>
                    <p>This action will delete all data and cannot be reversed.  Click OK below to proceed or Cancel to abort.</p><br />
                    
    				<form id="modalConfirm" name="modalConfirm" method="POST" enctype="multipart/form-data" action="#" onsubmit="$('#loaderDiv').show();" novalidate>   
                                                 
                    <fieldset id="submitAreaRight">
        			<input type="submit" name="okButton" id="okButton" class="shortButton" value="OK" onclick="document.modalConfirm.okButton.disabled=true; document.modalConfirm.cancelButton.disabled=true; document.modalConfirm.submit();"><input type="button" name="cancelButton" id="cancelButton" class="longButton" value="Cancel" onclick="window.location ='#';">
        			</fieldset>
     				<div id="loaderDiv" style="display:none"><img src="/images/icons/blue/loader.gif" /></div>		                
       				</form>
    				<a href="#close" title="Close"></a>
    			</div>
    		</div>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,118
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    Shouldn't really be working in FF.

    When you call a <form>s submit() function, you *BYPASS* the onsubmit!

    I suppose it is working in FF because you have TWO bugs. You are *BOTH* calling the <form>'s onsubmit() function *AND* you are *NOT* suppressing the action of the submit button. So FF ends up submitting the form *TWICE*.

    It's an easy fix:
    Code:
    <input type="submit" name="okButton" id="okButton" class="shortButton" value="OK" 
        onclick="this.disabled=true;this.form.cancelButton.disabled=true;return true;"/>
    if you simply do return true from a submit button, then the <form> will be submitted as normal and the onsubmit function will be called.

    Notice also how you can shorten your code that disables the form fields.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you so much for the help! I've modified the code but now the form doesn't submit. Do I need to add the document.modalConfirm.submit() to the onsubmit function?

    Thank you!!

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,118
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    No, read what I wrote.

    The return true should be enough.

    Only thing I can think of is that there is a problem in the code to show the overlay, though I dunno what it would be.

    Best I could suggest is SIMPLIFY. Get rid of onsubmit="$('#loaderDiv').show();" from the <form> tag.

    And then modify the submit button to this:
    Code:
    <input type="submit" name="okButton" id="okButton" class="shortButton" value="OK" 
        onclick="this.disabled=true;this.form.cancelButton.disabled=true;
                 document.getElementById('loaderDiv').style.display='block';return true;"/>
    You do know that the <form> will be submitting back to this same page?

    Hmmm...actually, that might be part of the problem. Instead of action="#" try using just action="" ???
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    When you submit a form, the page is dismissed, so you can't be certain of getting any kind of screen updating before it happens. The only way is to allow time for the screen update by delaying the sending of the form, ensuring that it degrades if script isn't available:
    Code:
    <!doctype html>
    <html>
    <head>
    <title>Show image when sending form</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    <div id="errorModal" class="modal">
       <div>
        <h4 class="error">ERROR</h4>
                    <p>This action will delete all data and cannot be reversed.  Click OK below to proceed or Cancel to abort.</p><br />
                    
        <form id="modalConfirm" name="modalConfirm" method="POST" enctype="multipart/form-data" action="#"  novalidate>   
                                                 
                    <fieldset id="submitAreaRight">
           <input type="submit" name="okButton" id="okButton" class="shortButton" value="OK" >
           <input type="button" name="cancelButton" id="cancelButton" class="longButton" value="Cancel" onclick="window.location ='#';">
           </fieldset>
         <div id="loaderDiv" style="display:none">IMAGE<img src="/images/icons/blue/loader.gif" title="IMAGE"/></div>                  
           </form>
        <a href="#close" title="Close"></a>
       </div>
      </div>
    <script type='text/javascript'>
    
    document.getElementById( "modalConfirm" ).onsubmit = function()
    {
      var obj = this;
      
      this.okButton.disabled=true; 
      
      this.cancelButton.disabled=true;
      
      document.getElementById( 'loaderDiv' ).style.display = "block";
    
      setTimeout( function(){ obj.submit(); }, 1000 );
      
      return false;
    }
    
    
    </script>  
    </body>
    </html>

  • #6
    New to the CF scene
    Join Date
    May 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you again for the help! So I modified the code to reflect the below and this time the div is being unhidden but the form isn't actually being submitted. I've tried modifying the action to #, "" and an actual page but nothing. Here is the code as it stands now:

    Code:
    		<div id="errorModal" class="modal">
    			<div>
    				<h4 class="error">ERROR</h4>
                    <p>This action will delete all data and cannot be reversed.  Click OK below to proceed or Cancel to abort.</p><br />
                    
    				<form id="modalConfirm" name="modalConfirm" method="POST" action="index.php" novalidate>   
                                                 
                    <fieldset id="submitAreaRight">
        			<input type="submit" name="okButton" id="okButton" class="shortButton" value="OK" onclick="this
                    .disabled=true; this.form.cancelButton.disabled=true; document.getElementById('loaderDiv').style.display='block'; return true;"><input type="button" name="cancelButton" id="cancelButton" class="longButton" value="Cancel" onclick="window.location ='#';">
        			</fieldset>
     				<div id="loaderDiv" style="display:none"><img src="/images/icons/blue/loader.gif" /></div>		                
       				</form>
    				<a href="#close" title="Close"></a>
    			</div>
    		</div>
    Quote Originally Posted by Old Pedant View Post
    No, read what I wrote.

    The return true should be enough.

    Only thing I can think of is that there is a problem in the code to show the overlay, though I dunno what it would be.

    Best I could suggest is SIMPLIFY. Get rid of onsubmit="$('#loaderDiv').show();" from the <form> tag.

    And then modify the submit button to this:
    Code:
    <input type="submit" name="okButton" id="okButton" class="shortButton" value="OK" 
        onclick="this.disabled=true;this.form.cancelButton.disabled=true;
                 document.getElementById('loaderDiv').style.display='block';return true;"/>
    You do know that the <form> will be submitting back to this same page?

    Hmmm...actually, that might be part of the problem. Instead of action="#" try using just action="" ???

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,118
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    Mystifies me. There is certainly nothing in that code that should be preventing the submit.

    Can you give us a live URL to look at?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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