Как сделать кнопку HTML не перезагружать страницу
у меня есть кнопка (<input type="submit">
). При нажатии на нее страница перезагружается. Так как у меня есть jQuery hide()
функции, вызываемые при загрузке страницы, снова скрывают эти элементы. Как заставить кнопку ничего не делать, чтобы я мог добавить действие, которое происходит при нажатии кнопки, но не перезагружать страницу.
8 ответов
использовать <button>
элемент или использовать <input type="button"/>
.
нет необходимости в js или jquery. чтобы остановить перезагрузку страницы, просто укажите тип кнопки как "кнопка". если вы не укажете тип кнопки, браузер установит его на "сброс" или "отправить", чтобы перезагрузить страницу.
<button type='button'>submit</button>
в HTML:
<form onsubmit="return false">
</form>
чтобы избежать обновления на всех "кнопках", даже с назначенным onclick.
вы можете добавить обработчик кликов на кнопку с помощью jQuery и вернуть false.
$("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>