1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

form要素のonSubmit属性について

Last updated at Posted at 2023-12-06

onSubmit属性は、HTMLのformタグに使われるイベントハンドラー属性。
フォームが送信される際(例えば、ユーザーが送信ボタンをクリックしたり、Enterキーを押したりした場合)に指定されたJavaScript関数を実行する。
onSubmitを使用する主な目的は、フォーム送信前にデータを検証したり、デフォルトのフォーム送信動作(通常は新しいページへのリクエストやページの再読み込み)を防止すること。

使用例

<script>
  function handleSubmit(event) {
    event.preventDefault(); // デフォルトのフォーム送信を防止
    alert('フォームが送信されました!');
  }
</script>

<form onSubmit="handleSubmit(event)">
  <input type="text" name="name" required>
  <input type="submit" value="送信">
</form>

送信しようとすると、handleSubmit関数が呼び出され。アラートが表示される。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?