【JavaScript】フォームを送信する方法

submit()

以下のように記述するとsubmit()を使用してフォームを送信できます。

<form action="/changename">
  <label for="name">名前</label>
  <input type="text" id="name">
</form>

<button>Change name</button>

const btn = document.querySelector('button')
const form = document.querySelector('form')

btn.addEventListener('click', () => {
  form.submit()
})

ただし、submit()でフォームを送信した場合には、

• submit イベントは発生しません
• 制約検証は行われません

requestSubmit()

requestSubmit()を使用してもフォームを送信できます。

<form action="/changename">
  <label for="name">名前</label>
  <input type="text" id="name" required>
</form>

<button>Change name</button>

const btn = document.querySelector('button')
const form = document.querySelector('form')

btn.addEventListener('click', () => {
  form.requestSubmit()
})

requestSubmit()でフォームを送信した場合には、

• submitイベントが発生します
• 制約検証は行われます