Jak sprawić, by przycisk HTML nie ładował ponownie strony

Mam przycisk ( <input type="submit">). Po kliknięciu strona ładuje się ponownie. Ponieważ mam kilka hide()funkcji jQuery, które są wywoływane podczas ładowania strony, powoduje to ponowne ukrycie tych elementów. Jak sprawić, by przycisk nic nie robił, więc nadal mogę dodać akcję, która ma miejsce, gdy przycisk jest kliknięty, ale nie ładuje ponownie strony.

nie ma potrzeby używania js ani jquery. aby zatrzymać ponowne ładowanie strony, określ typ przycisku jako „przycisk”. jeśli nie określisz typu przycisku, przeglądarka ustawi go na „reset” lub „wyślij”, co spowoduje ponowne załadowanie strony.

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

Użyj <button>elementu lub użyj pliku <input type="button"/>.

W HTML:

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

aby uniknąć odświeżania wszystkich „przycisków”, nawet z przypisanym kliknięciem.

Możesz dodać moduł obsługi kliknięcia do przycisku za pomocą jQuery i zwrócić false.

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

lub

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

W HTML:

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

W przypadku jQuery wspomniano już o podobnym wariancie.

Możesz użyć formularza, który zawiera przycisk przesyłania. Następnie użyj jQuery, aby zapobiec domyślnemu zachowaniu 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>

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

Nie mogę jeszcze komentować, więc zamieszczam to jako odpowiedź. Najlepszym sposobem uniknięcia przeładowania jest to, jak powiedział @ user2868288: używając znaku onsubmitna formtagu.

Ze wszystkich innych możliwości wymienionych tutaj, jest to jedyny sposób, który pozwala na wyzwolenie nowej walidacji danych wejściowych przeglądarki HTML5 ( <button>nie zrobi tego ani modułów obsługi jQuery / JS) i pozwala na dołączenie dynamicznych informacji jQuery / AJAX do strona. 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>