14

Since IE (<8?) does not let me change the text color of a disabled button, and introduces a horrible shadow (embossed effect), I want to mimic the behaviour of being a disabled button. This button will be disabled if there are input errors on the form.

Instead of disabling I can change the class in JS to darken the button etc when form validation takes place. What I also want to do is make it unclickable as well so that the user can not submit the form. (How) can I do this?

Thanks

andrew
  • 173
  • 1
  • 2
  • 6

4 Answers4

33

IE10+ & Modern Browsers Answer

This won't solve your issue since you're using < IE10, but for those who are using modern browsers and to answer the original question:

html button not clickable without being disabled

...this works simply & elegantly:

.no-click {
    pointer-events: none;
}

Just add this class to your UI:

<button class="no-click">
Community
  • 1
  • 1
jusopi
  • 6,791
  • 2
  • 33
  • 44
2
<form onSubmit="return validate(this)"

Just return false to stop submission

you can add the function in the window.onload too:

window.onload=function() {
  document.getElementsByTagName("form")[0]).onsubmit=function() {
    return validate(this);
  }
}
function validate(theForm) {
  // if not valid
  return false;

  // else
  return true;
}

If you want to adhere to the newest best practices, you will use addEventListener or attachEvent or jQuery bind

Comment From @BrendanEich :

@mplungjan onclick of submit just falls out of that being a button; form onsubmit is clearly better.

mplungjan
  • 169,008
  • 28
  • 173
  • 236
0

Nothing is out of bounds in solving this. First of all re-enable your button, then using Jquery, addClass that you want to (you can also remove the old class too) then re-disable the button:

$("#yourbuttonid").click(function(){
    $(this).removeAttr("disabled").removeClass("classname").addClass("classname2").attr("disabled", "disabled");
});
T9b
  • 3,312
  • 5
  • 31
  • 50
-4

You need to return false from the onclick event:

<input type="submit" value="Submit" onclick="return test();" />

or

<input type="submit" value="Submit" onclick="return false;" />

NOTE: you must use return in the onclick.

Barry Kaye
  • 7,682
  • 6
  • 42
  • 64
  • NEVER use onclick of submit when you have onsubmit of the form!!! Also if the button is not enabled, it does not click – mplungjan Aug 01 '11 at 15:30
  • @mplungjan - ridiculous - there is nothing wrong with using onclick here, further Andrew's question states "I want to mimic the behaviour of being a disabled button." which this does perfectly. – Barry Kaye Aug 01 '11 at 15:46
  • @mplungjan - no - you made a comment in CAPS - substantiate it or retract it. – Barry Kaye Aug 01 '11 at 18:34
  • So you will not take my word for it, me having coded JS since NS2.x and IE3.02 and now have to find real world examples? Hmm, may take some time since it is not simple to search for onsubmit versus onclick. Here is one (apart from another one of mine from SO) http://bytes.com/topic/javascript/answers/150812-form-validation-onclick-vs-onsubmit-winxps-ie – mplungjan Aug 01 '11 at 20:36
  • 1
    No problem - I'm not in a rush - take your time searching - I await an actual explanation. – Barry Kaye Aug 01 '11 at 21:10
  • We continue here: http://stackoverflow.com/questions/6908187/form-onsubmit-versus-submit-button-onclick - – mplungjan Aug 02 '11 at 17:09
  • 1
    @mplungjan Although I agree with you, you should be providing concrete examples, or a detailed explanation. Nobody is trying to take anyobdy's word for it here. – xyhhx Jun 26 '13 at 16:21
  • Who's word would you take? Should I tweet Brendan or something? – mplungjan Jun 26 '13 at 16:39
  • So I just did. Answer _@mplungjan onclick of submit just falls out of that being a button; form onsubmit is clearly better._ – mplungjan Jun 26 '13 at 17:07