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

Question

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

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

2105 8

html button javascript-events

8 ответов:

Comments

Ничего не найдено.

Andrew Hare · Accepted Answer · 2014-07-03 20:06:19

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

Jafar Rasooli · Accepted Answer · 2017-08-07 08:50:28

нет необходимости в js или jquery. чтобы остановить перезагрузку страницы, просто укажите тип кнопки как "кнопка". если вы не укажете тип кнопки, браузер установит его на "сброс" или "отправить" ведьму, чтобы перезагрузить страницу.
 <button type='button'>submit</button> 

user2868288 · Accepted Answer · 2013-10-24 19:14:43

в HTML:
<form onsubmit="return false">
</form>
во избежание обновления на всех "кнопках", даже с назначенным onclick.

Chris Gutierrez · Accepted Answer · 2009-12-10 04:28:06

вы можете добавить обработчик щелчка на кнопку с помощью jQuery и вернуть false.
$("input[type='submit']").click(function() { return false; });
или
$("form").submit(function() { return false; });

pestilence669 · Accepted Answer · 2009-12-10 05:15:25

в HTML:
<input type="submit" onclick="return false">
С jQuery, какой-то подобный вариант, уже упоминался.

pgonzaleznetwork · Accepted Answer · 2014-12-29 13:54:36

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

ProgrammingWithRandy · Accepted Answer · 2017-05-23 21:36:41

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

Gusstavv Gil · Accepted Answer · 2015-12-11 04:12:33

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