How do I make an HTML button not reload the page

Question

I have a button (< input type="submit"/>). When it is clicked the page reloads. Since I have some jQuery hide() functions that are called on page load, this causes these elements to be hidden again. How do I make the button do nothing, so I can still add some action that occurs when the button is clicked but not reload the page.

Answer 1

Use either the <button> element use an <input type="button"/>.

Answer 2

You could add a click handler on the button with jQuery and do return false.

$("input[type='submit']").click(function() { return false; });

or

$("form").submit(function() { return false; });

Answer 3

In HTML:

<input type="submit" onclick="return false">

With jQuery, some similar variant, already mentioned.