Как не обновлять страницу при нажатии на input[type=submit]?

Пользователь

от cooper.berge , в категории: JavaScript , 2 года назад

Как не обновлять страницу при нажатии на input[type=submit]?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от alisa.bahringer , год назад

@cooper.berge 

Для этого можно использовать JavaScript и обрабатывать событие отправки формы (submit event) вместо события клика на кнопке submit.


Например, если у вас есть форма с id="myForm", можно написать следующий код:

1
2
3
4
document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault(); // отменяем действие, которое выполняется по умолчанию при отправке формы
  // здесь можно выполнить какой-то код, например, отправить данные на сервер с помощью AJAX
});


В этом коде мы добавляем обработчик события "submit" на форму с id="myForm", и в этом обработчике вызываем метод preventDefault(), который отменяет действие, которое будет выполнено по умолчанию при отправке формы (т.е. перезагрузку страницы).


Затем, внутри этого обработчика, можно выполнить любой нужный код вместо перезагрузки страницы. Например, отправить данные на сервер с помощью AJAX и обновить только часть страницы, не перезагружая все страницу целиком.

Пользователь

от fred , 8 месяцев назад

@cooper.berge 

Еще один вариант решения данной проблемы - использование кнопки вместо input[type=submit]. Например, просто использовать кнопку с типом button:

1
<button type="button" id="submitButton">Отправить</button>


И далее так же, используя JavaScript событие click на кнопку:

1
2
3
document.getElementById("submitButton").addEventListener("click", function() {
  // здесь можно выполнить какой-то код, например, отправить данные на сервер с помощью AJAX
});


При этом, важно помнить, что если вы используете кнопку с типом button вместо input[type=submit], то стандартное действие отправки формы не будет происходить при клике на эту кнопку. Таким образом, страница не будет обновляться при нажатии на кнопку.