Welcome to WebmasterWorld Guest from 54.205.20.160

Forum Moderators: open

Message Too Old, No Replies

Disable input (button) until page load

Using Java to stop people from ordering until the page loads

   
7:17 pm on Apr 25, 2007 (gmt 0)

10+ Year Member



This is the input: <input type="image" name="regImage" src="images/cart.jpg">

I want that disabled until the page loads completely. Our ordering doesn't work unless the page is fully loaded, so I was seeing if there was a way to disable it until the page fully loaded.

Anyone have any ideas? I've tried some things, but nothing has worked so far. I'm just not good a Java (on my to do list to learn).

Thanks!

7:50 pm on Apr 25, 2007 (gmt 0)

5+ Year Member



Something like this should work:

<script language="javascript">
// put this in the <head></head> section
window.addEventListener("load", function() { document.getElementById('order_button').disabled = false; }, false);
</script>

<input id="order_button" type="image" name="regImage" src="images/cart.jpg" disabled=true>

8:02 pm on Apr 25, 2007 (gmt 0)

10+ Year Member



You are my new best friend. A hundred times thank you!
8:15 pm on Apr 25, 2007 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



The only problem with this sort of approach is that anyone with JavaScript disabled will not be able to re-enable the button.

What you might do instead is add a listener for when that button becomes available. You could use the Yahoo UI Library [developer.yahoo.com]'s Event Utility to attach the listener. For example, in the head of your document:


<!-- Dependency -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo/yahoo-min.js" ></script>
<!-- Event source file -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/event/event-min.js" ></script>
<script type="text/javascript">
YAHOO.util.Event.onAvailable('regImage', function() {this.disabled = true;} );
YAHOO.util.Event.on(window,'load',function(){
var regImage = document.getElementById('regImage');
regImage.disabled = false;
});
</script>

You would then need to give your input an id of 'regImage'.

8:16 pm on Apr 25, 2007 (gmt 0)

10+ Year Member



Okay, now I'm running into one small problem.

In IE6 (I know, but people still use it ... I checked it in Firefox first) the page throws 2 errors. Therefore the page doesn't fully load. Is there a way past that in IE6? Other than fixing the errors? Because one of the errors is kinda weird to fix.

8:55 pm on Apr 25, 2007 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Seems there might be some race conditions in IE6 with the example I gave. This might fix it:


<!-- Dependency -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo/yahoo-min.js" ></script>
<!-- Event source file -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/event/event-min.js" ></script>
<script type="text/javascript">
var windowLoaded = false;
YAHOO.util.Event.onAvailable('regImage', function() { if(!windowLoaded ) this.disabled = true;} );
YAHOO.util.Event.on(window,'load',function(){
windowLoaded = true;
document.getElementById('regImage').disabled = false;
});
</script>

[edited by: Fotiman at 8:56 pm (utc) on April 25, 2007]

9:03 pm on Apr 25, 2007 (gmt 0)

5+ Year Member



Fotiman's solution is good.

You could do something less elegant - but it will work for those JavaScript disablers :-) - like this:

<script language="javascript">
<!--
// put this in the <head></head> section
function enableOrderButton() { document.getElementById('order_button').disabled = false;
}
//-->
</script>
</head>

<body onLoad="enableOrderButton();">

<input id="order_button" type="image" name="regImage" src="images/cart.jpg">
<script language="javascript">
<!--
document.getElementById('order_button').disabled=true;
//-->
</script>

9:13 pm on Apr 25, 2007 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



but it will work for those JavaScript disablers

Correction: it *MAY* work.

Just because the script to disable the item appears after it in the HTML, it doesn't mean that the item will be available in the DOM yet. That's why I was using the onAvailable method, because it will monitor for when the item becomes available in the DOM.

9:17 pm on Apr 25, 2007 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



PS - You should avoid using the language attribute of <script> and instead be using the type attribute. The language attribute is invalid and not needed.

Also, there's no need to wrap script in HTML comments. It was intended to prevent scripts from showing up as text on the first generation browsers Netscape 1 and Mosaic. It has not been necessary for many years.

Your script tags should look like this:

<script type="text/javascript">
// Your stuff here. No HTML comments.
</script>

[edited by: Fotiman at 9:19 pm (utc) on April 25, 2007]

9:40 pm on Apr 25, 2007 (gmt 0)

5+ Year Member



Just thought I'd throw in a solution that didn't involve third-party libraries. Of course you are right in saying that it *MAY* work. Please forgive me for submitting an admittedly ugly and possibly faulty ad hoc solution. Oh, and thanks for pointing out my <script> tag atrocities. Mea culpa.
10:15 pm on Apr 25, 2007 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



@ericjust
I hope you don't think I was trying to chastise you. I was only pointing out some areas of concern. You have a valid point about not having to use a 3rd party library. Personally, I find that it's a great time saver, but I'm sure there are other ways to skin this cat. :)
10:25 pm on Apr 25, 2007 (gmt 0)

10+ Year Member



You both just made my day! Thank you so much. It now works in IE6 and Firefox (aka everything else)