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

118

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

html javascript-events button

— Анкур
источник

230

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

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

— Джафар Расули
источник

3

Это действительно работает! Это хорошая альтернатива <input type='button' />.

— Рик

5

Это работает хорошо, особенно в случае Chrome (для которого принятый ответ не работает)

— hobailey

3

Работает в Chrome в Windows 10. Да!

— ssdscott 01

83

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

— Эндрю Хэйр
источник

110

Элемент <button> по умолчанию вызывает перезагрузку в хроме (как минимум).

— AdamC

2

вы все еще можете использовать форму onsubmit event и возвращать false, если вы все еще не хотите возвращаться

— neu-rah

4

@Joe на самом деле, к сожалению, это так: / Мне нужно, чтобы мое веб-приложение работало с IE8, и эта перезагрузка немного раздражает ...

— Ms. Nobody

24

@pbeardshear Имеет место, если помещается в форму. при <button>размещении вне формы обновление не происходит!

— Kevinvhengst

13

добавить type="button"к <button>элементу в хроме, и он не

— Джонни Мец

21

В HTML:

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

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

— user2868288
источник

15

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

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

или

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

— Крис Гутьеррес
источник

6

Это не работает. Возвращение false в Chrome, по крайней мере, в последних версиях, по-прежнему вызывает обновление.

— user3690202

Это единственный ответ, который действительно сработал для меня. Я только что вернул false в своей функции, и обновление остановилось как в сафари, так и в Chrome.

— VessoVit

13

В HTML:

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

С jQuery уже упоминался некий аналогичный вариант.

— мор669
источник

9

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

Развернуть фрагмент

— ProgrammingWithRandy
источник

4

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

— CommonCoreTawan
источник

2

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

— Густавв Гиль
источник