はじめに
フォームにテキストを入力して送信後、入力内容を画面に表示させる方法をまとめました。
ご参考になれば幸いです！！！
実装コード&結果
今回のメインはJavaScriptなので、htmlの記述は簡易に書いています。
ご了承くださいm(_ _)m
<!doctype html>
<html lang="ja">
<header>
<meta charset="UTF-8">
<title>テスト</title>
</header>
<body>
<main>
<!-- 入力フォーム -->
<form action="#" id="form">
<input type="text" name="content">
<input type="submit" value="送信">
</form>
<!-- 入力結果を出力 -->
<p id="output"></p>
</main>
</body>
<!-- 以下JavaScriptを記述 -->
<script>
// submit時にイベント実行をする関数
document.getElementById('form').onsubmit = function (event) {
// 再読み込み防止
event.preventDefault();
// 入力フォームの内容を取得
let inputForm = document.getElementById('form').content.value;
// 入力内容を画面に出力
document.getElementById('output').textContent = `${inputForm}`;
}
</script>
</html>
フォーム入力後に送信ボタンをクリックすると、入力内容がその下に表示されます。
1. 入力フォームの説明
actionで送信先のURLを設定しており、今回は同じページを再表示させるのでaction=’#’とします。
id="form”でid名の設定を行います。
後に説明するgetElementById()にid名を指定することでform要素を取得します。
<form action="#" id="form> 〜 </form>
type=”text”とすることで入力フォームとして設定します。
name=”content”でname属性を設定し、これによってデータ送信時の内容に「名前」をつけています。
<input type="text" name="content">
type=”submit”とすることで、送信ボタンとして設定します。
value=”送信”で、ボタンに表記する名前を設定しています。
<input type="submit" value="送信">
フォーム入力後に送信された内容を表示するためのpタグです。
<p id="output"></p>
2.入力内容取得処理の説明(JS)
document.getElementById(’form’)でformを指定することで、form要素を取得します。
onsubmitイベントにより送信ボタンが押された時、function内の処理を実行させます。
確認ですが、送信ボタンとは<input type="submit" value="送信">になります。
document.getElementById("form").onsubmit = function (event) { };
通常、フォームの内容を指定したURLへ送信する動作をデフォルトで行います。
このデフォルト動作をevent.preventDefault()によってキャンセルします。
キャンセルを行わないと、再読み込みが実行されるので取得した入力内容が消えてしまいます。
それを防ぐためにコードを記述します。
event.preventDefault();
document.getElementById('form')にてform要素を取得します。
document.getElementById('form').contentのcontentで入力フォームの入力内容を取得します。
content自体は、入力フォーム<input type="text" name="content">のname=”content”に該当します。
そして入力内容を変数inputFormに格納しています。
let inputForm = document.getElementById('form').content.value;
document.getElementById('output')で入力内容を表示させるpタグ<p id="output"></p>の要素を取得しています。
textContentでpタグ要素の内容(プロパティの値）を読み取ります。
そして入力内容が格納されている$inputFormを使って=${inputForm}とすることでpタグのプロパティ値を書き換えています。
これによって画面に入力内容が表示されます。
document.getElementById('output').textContent = `${inputForm}`;
こんな感じです
実装した内容は、下記のような感じです。
入力内容が画面に出力されますので、よければ触ってみてください。
See the Pen Untitled by Kenta Mitani (@k_mitani) on CodePen.
おわり
今回は入力して送信を行った内容を画面に出力させる内容でした。
JavaScriptについて学習中なので、また記事をまとめようと思います。
ここまで読んで頂きありがとうございました。
参考サイト&本
【JavaScript】event.preventDefault()が何をするのか
https://qiita.com/yokoto/items/27c56ebc4b818167ef9e
確かな力が身につくJavaScript「超」入門 第2版
https://www.sbcr.jp/product/4815601577/