PDA

View Full Version : 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


<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; www.dynamicdrive.com/dynamicindex11/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
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..


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


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

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