Як зробити так, щоб кнопка HTML не перезавантажувала сторінку

У мене є кнопка ( <input type="submit">). Після натискання сторінки перезавантажується. Оскільки у мене є деякі hide()функції jQuery , які викликаються при завантаженні сторінки, це призводить до того, що ці елементи знову приховуються. Як змусити кнопку нічого не робити, тому я все ще можу додати певну дію, яка виникає при натисканні кнопки, але не перезавантажуванні сторінки.

не потрібно js або jquery. щоб зупинити перезавантаження сторінки, просто вкажіть тип кнопки як "кнопка". якщо ви не вкажете тип кнопки, браузер встановить його на «скинути» або «надіслати», що викликає перезавантаження сторінки.

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

Використовуйте або <button>елемент, або використовуйте <input type="button"/>.

В HTML:

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

щоб уникнути оновлення взагалі "кнопок", навіть при призначенні onclick.

Ви можете додати обробник кліків на кнопку за допомогою jQuery і повернути помилкове.

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

або

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

В HTML:

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

З jQuery, якийсь подібний варіант, вже згаданий.

Ви можете скористатися формою, що включає кнопку подання. Потім використовуйте jQuery, щоб запобігти поведінці форми за замовчуванням:

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

Як зазначено в одному з коментарів (похованих) вище, це можна виправити, не розміщуючи тег кнопки всередині тегу форми. Якщо кнопка знаходиться поза формою, сторінка не оновлюється.

Я поки не можу коментувати, тому я публікую це як відповідь. Кращий спосіб уникнути перезавантаження, як @ user2868288 сказав: використовуючи onsubmitна formтезі.

З усіх інших згаданих тут можливостей, це єдиний спосіб, який дозволяє запускати нову перевірку введення даних браузера HTML5 ( <button>не робити це, ані обробники jQuery / JS) та дозволяє додавати динамічну інформацію jQuery / AJAX до сторінки. Наприклад:

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