onsubmitを用いてJavaScriptの処理を発動させる方法

この記事では、onsubmitを用いて、送信ボタンをクリックした時に処理を発動させる方法について見ていきたいと思います。

目次


・onsubmitについて
・onsubmitの書き方
・onsubmitの使用例
・まとめ

onsubmitについて


onsubmitは、送信ボタンをクリックした時に、JavaScriptの処理を実行させることができます。

onsubmitの書き方


◆構文
・HTML

<form onsubmit="関数名()">
<input type="submit">
</form>

・JavaScript

function 関数名() {処理}


onsubmitの使用例


・HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Oparation Check</title>
</head>
<body>
<p>入力欄に何かを入力して送信ボタンを押して下さい。</p>
<form onsubmit="message(); return false;">
<input id="text" type="text">
<input id="submit" type="submit">
</form>
<p id="output"></p>
<script src='js/main.js'></script>
</body>
</html>

※ここで、「onsubmit」の後に「return false;」としているのは、送信ボタンをクリックした時に入力した内容が消えずに表示されたままにしておくためです。

・JavaScript

'use strict'

function message() {
const text = document.querySelector("#text");
const output = document.querySelector("#output");
output.textContent = text.value;
}


◆結果

文字を入力して送信ボタンを押すと、その下に入力した文字が表示されます。


まとめ


このように、form要素にonsubmitを設定することで、送信ボタンをクリックした時にJavaScriptの処理を発動させることができます。


関連記事
→ JavaScript配列便利機能
→ JavaScriptオブジェクト操作
→ JavaScript配列操作
→ JavaScriptの関数
→ JavaScriptループ処理

このページのTOPに戻る