Forum Moderators: open
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!
<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>
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'.
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.
<!-- 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]
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>
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.
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]
