Как сделать кнопку HTML не перезагружать страницу

Question

У меня есть кнопка (<input type="submit">). Когда он нажимается, страница перезагружается. Поскольку у меня есть некоторые функции jQuery hide(), вызываемые при загрузке страницы, это заставляет эти элементы снова скрываться. Как заставить кнопку ничего не делать, поэтому я могу добавить некоторые действия, которые возникают при нажатии кнопки, но не перезагрузка страницы.

Answer 1

Используйте либо элемент <button>, либо используйте <input type="button"/>.

Answer 2

Вы можете добавить обработчик клика на кнопку с jQuery и вернуть false.

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

или

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

Answer 3

В HTML:

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

С JQuery, какой подобный вариант, уже упоминалось.

Answer 4

В HTML:

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

, чтобы избежать обновления на все "кнопки", даже с OnClick назначен.

Answer 5

не нужно js или jquery. , чтобы остановить перезагрузку страницы, просто укажите тип кнопки как «кнопка». , если вы не укажете тип кнопки, браузер установит его «сбросить» или «отправить» причину, вызвавшую перезагрузку страницы.

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

Answer 6

Как указано в одном из комментариев (скатал) выше, это может быть исправлено, не помещая кнопку тег внутри тега формы. Когда кнопка находится вне формы, страница не обновляется сама.

Answer 7

Я еще не могу прокомментировать, поэтому я отправляю это как ответ. Лучший способ избежать перезагрузки - это то, как @ 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> 

Answer 8

Вы можете использовать форму, которая включает в себя кнопку отправки. Затем с помощью 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>