AskiLD
@AskiLD
Angular frontend developer

Как сделать так, чтобы по нажатию на кнопку в form отрабатывала JS-функция, а сама форма игнорировала отправку?

Есть форма.
<form id="request" method="post" action="javascript:void(0);" onsubmit="call()" >
<button type="submit"  > КНОПКА </button>
</form>

function call() {
  alert('Работает');
}

Мне нужно, чтобы по нажатию на КНОПКУ взять содержимое полей формы, но сама форма чтобы не отрабатывалась.
Как такое можно сделать?
  • Вопрос задан
  • 1192 просмотра
Решения вопроса 1
yarkov
@yarkov Куратор тега JavaScript
Помог ответ? Отметь решением.
Например так
<form id="request" method="post" >
  <input type="text" id="name">
  <button type="submit">КНОПКА</button>
</form>


document.querySelector('#request').addEventListener('submit', (e) => {
	e.preventDefault(); // отменяем стандартное поведение формы
  
  // собираем данные из полей формы и делаем что душе угодно
  const fields = e.target.querySelectorAll('input');
  
  console.log(Array.from(fields).map(input => ({
  	id: input.getAttribute('id'),
    value: input.value
  })));
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 7
ThunderCat
@ThunderCat Куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
action="javascript:void(0);" onsubmit="call()" это дичь редкая, есть же листенеры событий, я не ас в чистом js, но на jq нужно что то такое
$(function(){ // по загрузке всего документа выполнить
  $('#request').on('submit', function(e){ // вешаем листенер на форму, по срабатыванию запускаем код
     e.preventDefault(); // останавливаем отправку формы
     some code // делаем что-то
  })
})


UPD: Ниже подтянулись мэтры и выдали более чистые решения на ванилла жс.
Ответ написан
Комментировать
@kova1ev
используйте event.preventDefault()
Ответ написан
Комментировать
Stalker_RED
@Stalker_RED
myForm.addEventListener('submit', evt => { // при попытке отправки
  evt.preventDefault() // отменяем стандартную отправку
  // делаем что хотим
})
Ответ написан
Комментировать
@CrazyEnimal
Кратко не получится.
Можно просто сделать return false;
function call(){
// some code
return false;
}


или с применением jquery
$("#request").on("submit", function(){
  //  some code
  return false;
});


в этом случае если вместо " // some code" поставить например AJAX запрос то функция отработает но не перекинет по сабмиту а остановится.
Ответ написан
Комментировать
anatoly_kulikov
@anatoly_kulikov
Помог ответ? Отметь решением!
Самое простое:
<form onsubmit="return false;">
Ответ написан
Комментировать
Rog2000
@Rog2000
Если вы такие умные чего строем не ходите?
А зачем тег форм? Убрать его к чертям и вешать событие на клик.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы