Show/hide DIV only working in Firefox

JasonHarper · 10-11-2012, 11:28 PM

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>

Old Pedant · 10-11-2012, 11:38 PM

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.

JasonHarper · 10-12-2012, 01:01 AM

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!!

Old Pedant · 10-12-2012, 01:36 AM

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="" ???

Logic Ali · 10-12-2012, 02:25 AM

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>

JasonHarper · 10-12-2012, 03:12 PM

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

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="" ???

Old Pedant · 10-12-2012, 08:32 PM

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?