このチュートリアルでは、JavaScriptを使用して、ユーザーが入力したデータをフォームから読み取り、処理する方法を学びます。フォーム要素は、ユーザーが情報を入力できるようにするためにウェブサイトの重要な要素です。一般的に、このために複雑なフレームワークを使用する必要があると考えられています。この記事では、シンプルなJavaScriptを使用してフォームデータを処理する方法を紹介します。
主なポイント
- フォームを作成する方法、JavaScriptを使用してフォームデータにアクセスする方法、preventDefaultを使用してフォームのデフォルト動作を防止し、ユーザーのデータ入力を制御する方法を学びます。
ステップバイステップの手順
まず、ドキュメントにシンプルなHTMLフォームを作成します。さまざまな入力フィールドとサブミットボタンを正常に含めるように注意してください。
フォームがブラウザに表示されると、テストできます。入力フィールドに名前を入力し、Enterキーまたはサブミットボタンを押します。すべてが正しく機能している場合、入力した名前でアラートが表示されます。
これを実現するために、HTMLファイルにスクリプトタグを追加します。このスクリプトで、イベントオブジェクトをパラメータとして受け入れるsubmitFormというグローバル関数を定義します。
スクリプトでは、フォームのonsubmitイベントハンドラーを設定できます。これにより、フォームが送信されたときにsubmitForm関数が呼び出されます。イベントオブジェクトは、常にイベントハンドラー内にいるときに利用できることに注意してください。
フォームのデフォルトアクションを防止する重要なステップの1つは、event.preventDefault()を呼び出すことです。これは、データが送信された後にページがリロードされないようにしたりするために重要です。
フォームデータを読み取る準備ができたので、次に取り掛かります。フォームデータはevent.targetで取得できます。これにより、入力された情報に簡単にアクセスできます。
フォームデータを取得するには、FormDataコンストラクターを使用して新しいオブジェクトを作成し、フォーム要素をパラメータとして渡します。オブジェクトを作成した後は、getメソッドを使用して入力値にアクセスできます。
たとえば、formData.get('firstName')を使用すると、'firstName'という名前の入力フィールドの値が取得できます。この値を使用して、ユーザーに表示するメッセージを作成できます。
さらに別の入力フィールドをフォームに追加する場合は、次のように進めます: 'lastName'という名前の追加テキストフィールドを追加します。その後、値を取得するための類似の手順を実行できます。
これらの値を使用して、パーソナライズされたメッセージを生成できます。たとえば、「こんにちは[Vorname] [Nachname]！」
アラートでメッセージを表示せずに、HTMLに直接統合するために、メッセージをテキストとして表示するDOM内に新しいセクションを追加できます。一意のIDを持つ
さまざまなバリエーションを試すことができます。データをコンソールに出力したり、fetchを使用してPOSTリクエストを送信したりするなど、さまざまなJavaScriptアクションにデータを使用できます。
これは、JavaScriptを使用してフォームデータを読み取り、使用する最も基本的な方法です。データのバリデーションの追加やサーバーでのデータのさらなる処理など、これを改善するためのさまざまな方法があります。
サマリー
このチュートリアルでは、簡単なJavaScript関数を使用してフォームデータを読み取る方法を学びました。event.preventDefaultの重要性を探り、データをアラートや直接ドキュメントに挿入する方法を見ました。この基礎を持っていると、より複雑なフォームやそのデータ処理を設計するために十分に準備が整っています。
よくある質問
フォームデータにどのようにアクセスすればよいですか？新しい FormData(event.target) を使用して FormData オブジェクトを生成することで、フォームデータにアクセスできます。
event.preventDefault() を呼び出さなかった場合は何が起こりますか？event.preventDefault() を使用しないと、ブラウザの標準動作が実行され、ページがリロードされる可能性があります。
ページに複数のフォームを配置できますか？はい、ページに複数のフォームを配置し、各フォームに独自の onsubmit 関数を指定できます。
Fetch リクエストでフォームデータを使用する方法は？フォームデータを JSON 形式に変換して、Fetch API を使用してサーバーに送信できます。
フォーム処理に JavaScript フレームワークは必要ですか？いいえ、フレームワークを使用する必要はありません。純粋な JavaScript だけでフォーム処理を完全に行うことができます。
