Html Button that calls JQuery and does not post back

Question

Is it possible to have a button that doesn't post back to the server, and the click event can be detected by jquery? I have an MVC page that takes a while to load and access a database and i just want to reduce the number of loads required and db hits.

Answer 1

You can have attach any behavior you want using jQuery.

Here's your button

<button class="my-button">click this</button>

Here's your jQuery

$("button.my-button").click(function(){
  // do something!
});

If you'd like to use the submit button on the form, here's a more unobtrusive way:

$("#some-form input:submit").click(function(){
  // do something special!

  // prevent default behavior of button
  return false;
});