Jak zrobić, aby przycisk HTML nie przeładowywał strony

Nie ma potrzeby js lub jquery. aby zatrzymać przeładowanie strony wystarczy podać typ przycisku jako 'button'. jeśli nie podasz typu przycisku, przeglądarka ustawi go na "reset" lub "Prześlij", aby ponownie załadować stronę.

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

W HTML:

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

W celu uniknięcia odświeżania wszystkich "przycisków", nawet z przypisanym onclick.

Możesz dodać obsługę kliknięć na przycisku z jQuery i zwracać false.

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

Lub

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

W HTML:

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

Z jQuery, jakiś podobny wariant, już wspomniany.

Jak wspomniano w jednym z komentarzy (zakopanych) powyżej, można to naprawić, nie umieszczając znacznika przycisku wewnątrz znacznika formularza. Gdy przycisk znajduje się poza formularzem, strona nie odświeża się.

Możesz użyć formularza, który zawiera przycisk submit. Następnie użyj jQuery, aby zapobiec domyślnemu zachowaniu się formularza:

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

Nie mogę jeszcze skomentować, więc zamieszczam to jako odpowiedź. Najlepszym sposobem na uniknięcie przeładowania jest sposób, w jaki @user2868288 powiedział: używanie onsubmit na znaczniku form.

Spośród wszystkich innych możliwości wymienionych tutaj, jest to jedyny sposób, który pozwala na uruchomienie walidacji danych wejściowych nowej przeglądarki HTML5 (<button> nie zrobi tego ani obsługa jQuery/JS) i pozwala na dołączenie dynamicznych informacji jQuery / AJAX na stronie. Na przykład:

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