How to intercept the onclick event

Question

I'd like to intercept the onclick event of a button (not submit) before the page posts back from the onclick.

I'm having some trouble:

$(document).ready() { function() {
    function validate() { 
        ...
    }

    var oldOnClick = $("input[value=OK]").attr("onclick");
    $("input[value=OK]").attr("onclick", "if(!validate()) { return false; }" + oldOnClick));
});

Answer 1

If you still want to handle the button click event instead of the form submit event as all suggested, you could do something like this, using an anonymous function, to call your oldOnClick function, preserving the context and the event argument:

$(document).ready(function () {
  function validate() { 
    // ...
  }

  var oldOnClick = $("input[value=OK]").get(0).onclick;
  $("input[value=OK]").click(function (e) {
    if(!validate()) {
      return false;
    }
    oldOnClick.call(this, e); // enforce the context and event argument
  });
});

Answer 2

Rather than trying to intercept the onClick event, you should use the submit event.

Why? Simple, not all forms are submitted by clicking, what about tab, enter, etc?

$("form").submit(function() { // do validation/stuff here }); will do the trick.

You can return false; to stop the form submitting, or return true; if you want to let it through. Do your validation within the .submit itself.