CODEWITHSUNDEEP
javascripthtmlcssbutton
andrew
andrew

Reputation: 183

html button not clickable without being disabled

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

Upvotes: 15

Views: 46180

Answers (4)

jusopi
jusopi

Reputation: 6813

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">

Upvotes: 33

mplungjan
mplungjan

Reputation: 178109

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

Upvotes: 2

T9b
T9b

Reputation: 3502

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");
});

Upvotes: 0

Barry Kaye
Barry Kaye

Reputation: 7759

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.

Upvotes: -4

Related Questions