well right now I have this checkbox that's enabling / disabling a submit button for my form.
I simply have this code for enabling / disabling it
onclick="if(this.checked){this.form.submit_btn.disabled=false}else{this.form.submit_btn.disabled=true};this.blur();"
now I'm just wondering how I can make it so that if they click the button when it's disabled, have it alert them with a certain message.
so add an onclick event to the button and have it be like
if(this.disabled=true){alert('Button disabled!');}
or something similar? I'm pretty new to all the onclick stuff.
Thanks
well right now I have this checkbox that's enabling / disabling a submit button for my form.
I simply have this code for enabling / disabling it
onclick="if(this.checked){this.form.submit_btn.disabled=false}else{this.form.submit_btn.disabled=true};this.blur();"
now I'm just wondering how I can make it so that if they click the button when it's disabled, have it alert them with a certain message.
so add an onclick event to the button and have it be like
if(this.disabled=true){alert('Button disabled!');}
or something similar? I'm pretty new to all the onclick stuff.
Thanks
Share Improve this question asked Sep 9, 2011 at 11:17 Belgin FishBelgin Fish 19.8k41 gold badges105 silver badges133 bronze badges 4- 1 I don't think this is particularly necessary - browsers style disabled buttons to look as such, and seeing as no action is taken (or "button down" styling is applied) when the button is clicked, you don't need another notification telling users the button is disabled. – Bojangles Commented Sep 9, 2011 at 11:18
- onClick wont work when button is disabled, that's the whole point of disabling button. Instead show message inside a span or div above button for accepting the terms (if that's the case) by click on checkbox – Pa.M Commented Sep 9, 2011 at 11:20
- Not too good at JS... But in JQuery you would be able to do mouseenter/hover or so to tip the user that the checkbox needs to be filled. You should even be able to add an click event unlike the OnClick mand :) – Marco Johannesen Commented Sep 9, 2011 at 11:22
- well right now the button is being styled with an image that isn't changing, could I have it change the button image when it's disabled? – Belgin Fish Commented Sep 9, 2011 at 11:22
3 Answers
Reset to default 8Don't know what it's worth but in jQuery it would go like:
// Not tested!
$(document).ready(function(){
$('#myButton').click(function(){
if($(this).is(':disabled')) {
alert('No need to click, it\'s disabled.');
}
});
});
Don't see the point though. Why bother someone with a message while the button is already disabled (and the browser is showing so).
You can't well at least not directly anyway. When a button is disabled, then it's disabled and that means it also fires no events.
Now.. that said, there is a way you could get round it, if you absolutely have to.
Essentially, you can make it work by using 2 divs and a button like so:
<div>
<div id="overlay" style="display:hidden; z-order:99999"> </div>
<button id="mybtn">My Button to click</button>
</div>
You set the overlay div's background colour to transparent, and when you disable the button, you unhide the overlay div.
Because the div is transparent, you should see NO change in the button, but clicking on it will result in the clicks getting picked up by the transparent div first.
You would then attach your click handler to the overlay div, and the result is that you can trigger a message that appears (but isn't really) to be being popped up by a click on the disabled button.
Instead you may change the image style with gray scale approach.
img {
filter: gray; /* IE6-9 */
filter: grayscale(1); /* Firefox 35+ */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}