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

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

Ответы

Ответ 1

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

Ответ 2

нет необходимости js или jquery. чтобы остановить перезагрузку страницы, просто укажите тип кнопки как 'button'. если вы не укажете тип кнопки, браузер установит его на "reset" или "отправить" причину, вызвавшую перезагрузку страницы.

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

Ответ 3

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

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

или

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

Ответ 4

В HTML:

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

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

Ответ 5

В HTML:

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

В jQuery уже упоминался один подобный вариант.

Ответ 6

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

Ответ 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>

Ответ 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>