How do I make an HTML button not reload the page

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.

there is no need to js or jquery. to stop page reloading just specify the button type as 'button'. if you dont specify the button type, browser will set it to 'reset' or 'submit' witch cause to page reload.

 <button type='button'>submit</button> 

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

In HTML:

<form onsubmit="return false">
</form>

in order to avoid refresh at all "buttons", even with onclick assigned.

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

In HTML:

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

With jQuery, some similar variant, already mentioned.

You can use a form that includes a submit button. Then use jQuery to prevent the default behavior of a form:

$(document).ready(function($) {
  $(document).on('submit', '#submit-form', function(event) {
    event.preventDefault();
  
    alert('page did not reload');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id='submit-form'>
  <button type='submit'>submit</button>
</form>

As stated in one of the comments (burried) above, this can be fixed by not placing the button tag inside the form tag. When the button is outside the form, the page does not refresh itself.

I can't comment yet, so I'm posting this as an answer. Best way to avoid reload is how @user2868288 said: using the onsubmit on the form tag.

From all the other possibilities mentioned here, it's the only way which allows the new HTML5 browser data input validation to be triggered (<button> won't do it nor the jQuery/JS handlers) and allows your jQuery/AJAX dynamic info to be appended on the page. For example:

<form id="frmData" onsubmit="return false">
 <input type="email" id="txtEmail" name="input_email" required="" placeholder="Enter a valid e-mail" spellcheck="false"/>
 <input type="tel" id="txtTel" name="input_tel" required="" placeholder="Enter your telephone number" spellcheck="false"/>
 <input type="submit" id="btnSubmit" value="Send Info"/>
</form>
<script type="text/javascript">
  $(document).ready(function(){
    $('#btnSubmit').click(function() {
		var tel = $("#txtTel").val();
		var email = $("#txtEmail").val();
        $.post("scripts/contact.php", {
			tel1: tel,
			email1: email
		})
		.done(function(data) {
			$('#lblEstatus').append(data); // Appends status
			if (data == "Received") {
				$("#btnSubmit").attr('disabled', 'disabled'); // Disable doubleclickers.
			}
		})
		.fail(function(xhr, textStatus, errorThrown) { 
			$('#lblEstatus').append("Error. Try later."); 
		});
     });
   }); 
</script>

You could also use JavaScript for that:

  let input = document.querySelector("input");
  input.addEventListener("submit", (event) => {
    event.preventDefault();
  })