[RESOLVED] Disabling form and loading in screen

@PezmcMar 02.2007

I have just created a digital questionnaire for some year 7’s at my school. However the school server is quite slow and the pages take quite a long time to load. Many of the year 7’s click the submit button multiple times and wreck the database.
Recently I saw on a website a form that when you submitted it, it filled the screen with 50% opaque black. And in the middle it said loading…, how does this work, does anyone have the script, does anyone have a better solution?
Thanks in advance

to post a comment

JavaScript

17 Comments(s) _↴

@bcamp1973Mar 02.2007 — #You could just add the following to your button...

<input type="submit" onclick="this.disabled=true; this.value='Processing...'" />

@PezmcauthorMar 02.2007 — #nice idea but the submit button is a image, can i still disable it? Also is there a way to put html code in a tables cell? As I could just put <span class=huge>Loading</span><img src="dotdotdot.gif">

@bcamp1973Mar 02.2007 — #ah, ok...gimme a sec

@PezmcauthorMar 02.2007 — #kk thanks for your help

@bcamp1973Mar 02.2007 — #ok, try this...i can't test it easily without creating a loop to stall the submit process...it requires creating a new button to replace the submit button after the user clicks...

<html>

<head>

<script type="text/javascript">

function disable(obj) {

obj.src='processing.gif';

obj.onclick=function() {return false}

}

</script>

</head>

<body>

<form>

<input type="image" id="mybutton" src="submit.gif" onclick="disable(this)" value="submit" />

</form>

</body>

</html>

@PezmcauthorMar 02.2007 — #wow that script looks really usefull

Thanks, gtg test then reply. Oh and do you want a link on my thanks page? (Weblink and link text please)

@bcamp1973Mar 02.2007 — #oh, ya...use innerHTML

<script type="text/javascript">document.getElementById('changeContents').innerHTML='<span class="huge">Loading</span><img src="dotdotdot.gif">'</script>

<td id="changeContents"></td>

@PezmcauthorMar 02.2007 — #Nope still not working, used first script. I am kinda rubbish at javascript, please can you tell me what I have done wrong?

Also is there anyway to make a image that is hyper linked also change to the processing message? at at the start its just a image and then becomes form submit buttons

@bcamp1973Mar 02.2007 — #hmm...ok, see if this works any better...

&lt;html&gt;
 &lt;head&gt;
 
 &lt;script type="text/javascript"&gt;
 function disable() {
 document.getElementById('mybutton').src='processing.gif';
 document.getElementById('mybutton').onclick=function() {return false}
 }
 &lt;/script&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;form onsubmit="disable()"&gt;
 
 <i>	</i>&lt;input type="image" id="mybutton" src="submit.gif" value="submit" /&gt;
 
 &lt;/form&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

regarding changing a hyper link. again, i would use innerHTML...

<i>
 </i>&lt;a href="foo" onclick="this.src='processing.gif'"&gt;&lt;img src="bar.gif"/&gt;&lt;/a&gt;

@PezmcauthorMar 02.2007 — #Aww I hate my life still doesn't work. Does it work for you? Can you see what I have done wrong in the source? Just click next once to see the page with it in.

http://maths.pezmc.com

@bcamp1973Mar 02.2007 — #looks like you've called the function "disabler()" with an "r" but you're calling "disable()" WITHOUT the "r"...see if changing that fixes it...

@PezmcauthorMar 03.2007 — #oops typo soz for dumb question.

Edit: Still doesn't work

@bcamp1973Mar 03.2007 — #grrr...javascript and i have a hate/hate relationship...this is a good example of why ? I'll take a crack at this over the weekend. signing off work for now tho...cheers!

@bcamp1973Mar 03.2007 — #aha! I think i sorted it out...

change:
<form onsubmit="disable()">

to this:
<form onsubmit="return disable()">

see if that works...

@bcamp1973Mar 03.2007 — #BTW, if you want to build this withough littering your page with javascript, here's a way to do that. Create the page like so...

&lt;html&gt;
 &lt;head&gt;
 &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
 
 <i>	</i>&lt;body&gt;
 
 <i>	</i>&lt;form id="myform"&gt;
 <i>	</i>	&lt;input type="image" id="mybutton" src="submit.gif" value="submit" /&gt;
 <i>	</i>&lt;/form&gt;
 
 <i>	</i>&lt;/body&gt;
 &lt;/html&gt;

then create a javascript file with the code...

window.onload=function() {
 if(theform=document.getElementById('myform')) {
 theform.onsubmit=function() {return disable()}
 }
 }
 
 function disable() {
 var thebutton=document.getElementById('mybutton');
 
 <i>	</i>thebutton.src='processing.gif';
 <i>	</i>thebutton.onclick=function() {return false}
 <i>	</i>thebutton.style.cursor='default';
 }

This is considered "good form" as including the javacript within the HTML can cause issues with accessibility.

@PezmcauthorMar 03.2007 — #Thanks and for anyone else trying to do this use this to preload your images

[CODE]<SCRIPT language="JavaScript">
 <!--
 if (document.images)
 {
 pic1= new Image(133,26); 
 pic1.src="http://maths.pezmc.com/processing.gif"; 
 }
 //-->
 </SCRIPT>[/CODE]

@bcamp1973Mar 03.2007 — #BTW, <SCRIPT language="JavaScript"> has been deprecated. It's generally recommended you use <script type="text/javascript">...

Also in #JavaScript _↴

Variable is undefined after out from the function block [RESOLVED] Force Save As Styling JavaScript output with CSS

Success!

Help @Pezmc spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Disabling form and loading in screen

17 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] Disabling form and loading in screen

17 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

17 Comments(s) _↴

Also in #JavaScript _↴