Ваниль JS альтернатива @ submit.prevent = "myMethod"

Question

Я использую Vue. js для большинства моих JavaScript связанных вещей. Однако я столкнулся с ситуацией, когда я хочу воспроизвести некоторые функциональные возможности, которые достигаются Vue, но в Vanilla JS.

Vue дает вам этот модификатор, который вы можете поместить в элемент формы.

@submit.prevent="myMethod"

Я хочу сделать то же самое. Я хочу, чтобы пользователь нажал кнопку, чтобы появился какой-нибудь код JS, а затем форма для отправки.

Это одна вещь, которую я уже пробовал, но форма, отправленная до JS на самом деле был казнен.

var form = document.getElementById('a-form');

form.addEventListener('submit', event => {
// my code
});

Заранее благодарен за помощь!

Answer 1

Вызовите preventDefault для события в приемнике отправки события:

let form = document.getElementById('theForm')
form.addEventListener('submit', (e)=> {
  console.log('event', e)
  console.log('default prevented', e.defaultPrevented)
  e.preventDefault()
  console.log('default prevented', e.defaultPrevented)
})

<form id="theForm" action="#submitted">
<input name="theInput"/>
<button type="submit">Submit?</button>
</form>

Обратите внимание, что это работает, даже если форма отправляется нажатием клавиши ввода.

Answer 2

это preventDefault функция:

var form = document.getElementById('a-form');

form.addEventListener('submit', event => {
 event.preventDefault();

//code
});