HTML | PHPにフォームデータを送信、ページ移動なしの場合

2023-10-07HTML フォーム,HTML

HTMLだけで方法とサンプルコードを紹介しています。

PHPに送信するフォームのHTMLサンプル

HTMLのフォームからPHPに送信するには「action」属性に送信先とするPHPファイルのパスを記述します。

「method」プロパティでは、「POST」送信、「GET」送信を指定可能です。

<form action="test.php" method="POST">
	<p><input type="text" name="name" size="25" value=""></p>
	<textarea name="text" cols="100" rows="5"></textarea></p>
	<p><input type="submit" value="送信"></p>
</form>

送信時にページ移動しないようにする方法

フォームからの送信時にページ移動しないようにするには、JavaScriptを利用して以下の手順で実装可能です。

1. addEventListener()で送信ボタンのクリックイベントを発行する
2. preventDefault()でデフォルトのイベントをキャンセルする
3. FormData()でフォームデータを取得する
4. fetch()でフォームデータを送信する

まず、JavaScriptのaddEventListener()関数で送信ボタンのクリックイベントを作成します。
サンプルコードでは、フォームにidを付与して取得していますが、ページ内にひとつしかフォームがない場合は、「querySelector(“input[type=’submit’]")」にて取得可能です。

preventDefault()関数は元々実装されているイベント内容を破棄します。
これは、「action」属性で指定した送信先にフォームデータの送信、ページ移動をキャンセルします。

フォームデータの送信をキャンセルしていますので、改めてFormData()とfetch()を使ってフォームデータをPHPファイルに送信しています。

<form id="test_form" action="test.php" method="POST">
	<p><input type="text" name="name" size="25" value=""></p>
	<textarea name="text" cols="100" rows="5"></textarea></p>
	<p><input type="submit" value="送信"></p>
</form>

<script>
function submit() {
	// デフォルトのページ遷移イベントをキャンセルする
	event.preventDefault();

	// フォームデータを「POST」送信する
	const formData = new FormData(document.querySelector("form"));
	fetch("test.php", {
		method: "POST",
		body: formData,
	});
}

// フォームの送信ボタンにクリックイベントを作成する
document.querySelector("#test_form input[type='submit']").addEventListener("click", submit);
</script>