homepage Welcome to WebmasterWorld Guest from 54.211.230.186
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Disable input (button) until page load
Using Java to stop people from ordering until the page loads
Kate82

10+ Year Member



 
Msg#: 3321576 posted 7:17 pm on Apr 25, 2007 (gmt 0)

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!

 

ericjust

5+ Year Member



 
Msg#: 3321576 posted 7:50 pm on Apr 25, 2007 (gmt 0)

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>

Kate82

10+ Year Member



 
Msg#: 3321576 posted 8:02 pm on Apr 25, 2007 (gmt 0)

You are my new best friend. A hundred times thank you!

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3321576 posted 8:15 pm on Apr 25, 2007 (gmt 0)

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

Kate82

10+ Year Member



 
Msg#: 3321576 posted 8:16 pm on Apr 25, 2007 (gmt 0)

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.

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3321576 posted 8:55 pm on Apr 25, 2007 (gmt 0)

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]

ericjust

5+ Year Member



 
Msg#: 3321576 posted 9:03 pm on Apr 25, 2007 (gmt 0)

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>

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3321576 posted 9:13 pm on Apr 25, 2007 (gmt 0)

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.

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3321576 posted 9:17 pm on Apr 25, 2007 (gmt 0)

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]

ericjust

5+ Year Member



 
Msg#: 3321576 posted 9:40 pm on Apr 25, 2007 (gmt 0)

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.

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3321576 posted 10:15 pm on Apr 25, 2007 (gmt 0)

@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. :)

Kate82

10+ Year Member



 
Msg#: 3321576 posted 10:25 pm on Apr 25, 2007 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved