Como faço para que um botão HTML não recarregue a página

Eu tenho um botão ( <input type="submit">). Quando é clicado, a página é recarregada. Como tenho algumas hide()funções jQuery que são chamadas no carregamento da página, isso faz com que esses elementos sejam ocultados novamente. Como faço para que o botão não faça nada, para que ainda possa adicionar alguma ação que ocorre quando o botão é clicado, mas não recarrega a página.

não há necessidade de js ou jquery. para interromper o recarregamento da página, basta especificar o tipo de botão como 'botão'. se você não especificar o tipo de botão, o navegador irá configurá-lo para 'redefinir' ou 'enviar' para atualizar a página.

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

Use o <button>elemento ou um <input type="button"/>.

Em HTML:

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

para evitar a atualização de todos os "botões", mesmo com onclick atribuído.

Você poderia adicionar um manipulador de cliques no botão com jQuery e retornar false.

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

ou

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

Em HTML:

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

Com jQuery, alguma variante semelhante, já mencionada.

Você pode usar um formulário que inclui um botão de envio. Em seguida, use o jQuery para evitar o comportamento padrão de um formulário:

$(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>

Conforme afirmado em um dos comentários (enterrado) acima, isso pode ser corrigido não colocando a tag do botão dentro da tag do formulário. Quando o botão está fora do formulário, a página não se atualiza.

Ainda não posso comentar, então estou postando isso como uma resposta. A melhor maneira de evitar recarregar é como @ user2868288 disse: usando o onsubmitna formtag.

De todas as outras possibilidades mencionadas aqui, é a única maneira que permite que a nova validação de entrada de dados do navegador HTML5 seja acionada ( <button>não fará isso nem os manipuladores jQuery / JS) e permite que suas informações dinâmicas jQuery / AJAX sejam anexadas no página. Por exemplo:

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