submit disable does not work properly

**jwzumwalt** · 08-04-2010, 08:07 PM

I am new to javascript and I am trying to disable the submit button and show a "throbber while a lengthy process takes place. The sample code I have works except that after the function call to show the "throbber", it does not go to the web page in form action link. What am I doing wrong?
Thanks, JZ

Code:

<html>
<head>
<script language="JavaScript"> 
   function throbber() { 
   document.write('<div align="center"><img src="throbber.gif" alt="loading" border="0" align="absmiddle" width="50" height="50" /><br><font style="font-family:arial; font-size:24px; color:gray;"><br>Working</font></div>');
   setTimeout('/* comment */',2000);  
} 
</script> 
</head>

<body>
<form id="form1" method="post"  action="somewhere.html">
<input type='submit' id='sub' value='submit' onClick="this.disabled=true;throbber();"> 
</form>
</body>
</html>

**Beverleyh** · 08-04-2010, 08:15 PM

So you want to disable the submit button after one click so it can't be accidentally submitted twice?

Try this "Submit Once!" script from the DD library; http://www.dynamicdrive.com/dynamici...submitonce.htm

**jwzumwalt** · 08-04-2010, 08:36 PM

I really wish I could use your suggestion, but the actual application
involves very large input scripts that were poorly written - some
are over 3000 lines long!

I need to surgically manipulate individual buttons; of course
none of that was obvious in the proof of concept I posted!

My boss would also like a visual animation to show the user
that something is happening.

Any way, as I mentioned, I am new to JS and what seems
to be happening is it goes to the function call... possibly
returns, but then does not execute the form action="xxxx".

Any help would be greatly appreciated - JZ

**Beverleyh** · 08-04-2010, 08:52 PM

I have another script you can try but unfortunately I'm on my phone at the mo so I can't get to it. Hopefully someone will help during the night (its 10pm now here in the UK) but if not, i'll get back to you in the morning.

**clueful** · 08-05-2010, 02:34 AM

Originally Posted by jwzumwalt

I am new to javascript

One of the first things to learn is that document.write can only be called when the document is building, If you call document.write thereafter, you wipe-out the current content of the document.

You could try marking-up your div and calling it with the function shown, but there's no guarantee that the display will update once a form is submitted, since the page is about to be unloaded..

Code:

<div align="center" id='throb' style="display:none"><img src="throbber.gif" alt="loading" border="0" align="absmiddle" width="50" height="50" /><br><font style="font-family:arial; font-size:24px; color:gray;"><br>Working</font></div>

<script type='text/javascript'>
function throbber() 
{ 
   document.getElementById( 'throb' ).style.display = 'block';
} 
</script>

**Beverleyh** · 08-05-2010, 09:09 AM

I'm back now -

Try putting this script in the <head> section;

Code:

<script type="text/javascript">
function Throbber() 
	{
	if (!submitted) 
		{
		submitted = true;
		Throbber = document.getElementById('throbber_img');
		document.getElementById('waiting').style.display = 'block';
		setTimeout('Throbber.src = Throbber.src',100);
		return true;
		}
	}

function FormSubmit() 
	{
	document.MyFormName.submit(); // define the name of the form to submit here
        document.getElementById('waiting').style.display = 'block'
        return false;
  	}
</script>

And edit your form in the <body> of your web page to include this;

Code:

<form action="process.php" method="post" name="MyFormName" id="form1">
...
<!-- Submit form with javascript - replace <input type="submit" with <input type="button" -->
	<input type="button" id="sub" value="submit" onclick="FormSubmit();">
</form>
<div style="display:none;" id="waiting">
    	<img id="throbber_img" src="images/throbber.gif"> Please wait while we process your request...
</div>

Please follow the comments in the snippets.

**jwzumwalt** · 08-05-2010, 05:08 PM

Thanks for all the help... This is what I finaly came up with. It uses Jquery.

Code:

<html>
     <head>
     <script type="text/javascript" src="jquery.js"></script>
     <script type="text/javascript">
/*   +------------------------------------------------------------------+
     |                   Show "throbber" (busy) image                   |
     +------------------------------------------------------------------+
     |   Shows an animated cartwheel so the user will remain happy      |
     |   durring slow proccesses.  August 2010 - Jan Zumwalt            |
     +------------------------------------------------------------------+ */
     $(document).ready(function() {
          $('#myform').submit(function(){                          // id for form
               $('#thesubmitbutton').attr('disabled', 'disabled'); // id for button, disable
               $('#throbberImage').show();                         // id for throbber image, show
               alert('It Works!');                                 // remove after testing
          } ); // end of submit function
     } );      // end of ready function

     </script>
     </head>

<body>
<!--  image dive wrapper id are needed for "throbber" routine (prevents double clicking) -->
<div id='throbberImage' style="display:none;" align="center"><img src="throbber.gif" alt="loading" border="0" /><br><font style="font-family:arial; font-size:24px; color:gray;"><br>Working</font></div>
     <form id="myform" name="myform"  method="post" >
          <!--  button id are needed for "throbber" routine (prevents double clicking) -->
	     <input type="submit" id="thesubmitbutton" value="Try Me"  />
     </form>	
</body>

</html>

Thread: submit disable does not work properly

Thread Tools

Search Thread

submit disable does not work properly

Thanks But this won't work :(

Jquery solution

Bookmarks

Bookmarks

Posting Permissions