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

Question

[Андрей Харитонов]

Есть форма.

<form id="request" method="post" action="javascript:void(0);" onsubmit="call()" >
<button type="submit"  > КНОПКА </button>
</form>

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

Мне нужно, чтобы по нажатию на КНОПКУ взять содержимое полей формы, но сама форма чтобы не отрабатывалась.
Как такое можно сделать?

Comments

[Konata Izumi]

Причем тут php?

[Модератор]

Андрей Харитонов дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац). В противном случае, ваши вопросы будут удаляться по причине тег-спама, а систематические нарушения приведут к блокировке учетной записи.

Answer 1

[Алексей Ярков]

Например так

<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
  })));
});

Comments

[Александр]

А потом ТС создаст тему "Почему этот код не работает в IE". Я понимаю нелюбовь к этому браузеру, но одно дело когда вы целенаправлено отказываетесь от его поддержке, другое дело когда из-за незнание.

[Алексей Ярков]

Александр,

А потом ТС создаст тему "Почему этот код не работает в IE".

Там ему какой-нибудь babel и посоветуют ))

[Алексей Ярков]

Андрей Харитонов если ответ помог, то отметьте, пожалуйста, решением

Answer 2

[ThunderCat]

action="javascript:void(0);" onsubmit="call()" это дичь редкая, есть же листенеры событий, я не ас в чистом js, но на jq нужно что то такое

$(function(){ // по загрузке всего документа выполнить
  $('#request').on('submit', function(e){ // вешаем листенер на форму, по срабатыванию запускаем код
     e.preventDefault(); // останавливаем отправку формы
     some code // делаем что-то
  })
})

UPD: Ниже подтянулись мэтры и выдали более чистые решения на ванилла жс.

Answer 3

[kova1ev]

используйте event.preventDefault()

Answer 4

[Stalker_RED]

myForm.addEventListener('submit', evt => { // при попытке отправки
  evt.preventDefault() // отменяем стандартную отправку
  // делаем что хотим
})

Answer 5

[Павел Дружинин]

Можно просто сделать return false;

function call(){
// some code
return false;
}

или с применением jquery

$("#request").on("submit", function(){
  //  some code
  return false;
});

в этом случае если вместо " // some code" поставить например AJAX запрос то функция отработает но не перекинет по сабмиту а остановится.

Answer 6

[marginBottom]

https://developer.mozilla.org/ru/docs/Web/API/Even...
https://stackoverflow.com/a/44033425

Answer 7

[Анатолий Куликов]

Самое простое:
<form onsubmit="return false;">

Answer 8

[Иван]

А зачем тег форм? Убрать его к чертям и вешать событие на клик.

Comments

[Андрей Харитонов]

сможет собирать все поля? как?

[Иван]

Андрей Харитонов, легко, К примеру код

КНОПКА

Хотим значение инпута получить по клику js:
$(document).ready(function() {
$("button").click(function() { //событие на клик
var name = $("#name").val(); //поучаем значение импута
$.ajax({ //отправляем куда нужно инфу
url: "http://сайт/имяфайла.php",
type: "POST",
data: {
'name' : name
},
success: function(data) {
// что надо сделать в результате
alert('Работает');
});
}
});

});
});
Как то так)