JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

ボタンクリックをトリガーに、JavaScript（jQuery）でフォーム送信時にアラートを表示する方法

Webフォームを作成する際、「送信ボタンが押されたことをユーザーに知らせたい」という場面はよくあります。本記事では、jQueryのclick()メソッドを使って、ボタンクリックをトリガーにフォーム送信時のアラートを表示する方法を、具体的なコード例とともにわかりやすく解説します。

1. 送信ボタンのHTMLを用意する

まずは、クリックイベントを設定する対象となるボタンを用意します。ここでは、id属性に「submitForm」を指定したシンプルな送信ボタンを使用します。

<button id="submitForm">Submit</button>

このようにidを付与しておくことで、後からjQueryで簡単に要素を取得できるようになります。

2. クリックイベントでアラートを表示する

次に、ボタンのidをもとにクリックイベントを登録します。フォーム送信のタイミングでアラートを表示したい場合は、以下のように記述します。

$("#submitForm").click(function() {
    alert("The Form has been Submitted.");
});

このコードでは、idが「submitForm」のボタンがクリックされると、alert()によって「フォームが送信されました」というメッセージが画面に表示されます。

3. 完全なサンプルコード

入力フィールドを含む、動作確認用の完全なHTMLファイルの例を紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
CollegeId=<input id="collegeId" type="text"><br />
CollegeName=<input id="collegeName" type="text"><br />
<button id="submitForm">Submit</button>
<script>
    $("#submitForm").click(function() {
        alert("The Form has been Submitted.");
    });
</script>
</body>
</html>

このサンプルでは、大学IDと大学名の2つのテキスト入力欄と送信ボタンを配置しています。ボタンをクリックすると、アラートが表示される仕組みです。

4. プログラムの実行方法

上記のコードを「index.html」などの任意のファイル名で保存します。その後、VS Codeエディターでファイルを右クリックし、「Open with Live Server」を選択してブラウザーで開いてください。

5. 実行結果

プログラムを実行すると、まず次のような画面が表示されます。

ボタンクリックをトリガーに、JavaScript（jQuery）でフォーム送信時にアラートを表示する方法

続いて、送信ボタンをクリックすると、以下のようにアラートダイアログが表示されます。

ボタンクリックをトリガーに、JavaScript（jQuery）でフォーム送信時にアラートを表示する方法

まとめ

jQueryのclick()メソッドを使えば、わずか数行のコードでボタンクリック時のアラート表示を実装できます。フォーム送信の完了通知や入力内容の確認など、さまざまな場面で応用できる基本的なテクニックなので、ぜひ実際のプロジェクトでも活用してみてください。

  1. JavaScriptでHTMLボタンをクリックしたときにアラートを表示する方法

    ボタンをクリックしたときにアラートを表示するには、JavaScriptのaddEventListener()メソッドを使用します。例として、HTMLページ上に以下のようなボタンが配置されている場合を考えてみましょう。<button type=button>Please Press Me</button>サンプルコード以下は、ボタンがクリックされたときにアラートを表示する完全なコード例です。<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8> &

  2. 【JavaScript】入力した数値の各桁の合計をボタンクリックで計算・表示する方法

    はじめに 本記事では、ユーザーが数値を入力できるテキストボックスを用意し、ボタンがクリックされたときに、その数値の各桁の合計を計算して画面に表示するJavaScriptプログラムの作り方を解説します。 例えば「12345」と入力して送信ボタンを押すと、「1 + 2 + 3 + 4 + 5 = 15」というように、すべての桁の数字を足した結果が出力されます。 実装コード まずは完成形のコードを見てみましょう。 JavaScriptコード function myFunc() {     var num = document.getElementById(