onsubmit メソッドを使用して PHP でフォームデータを送信する方法

フロントエンド開発では、フォーム データをバックエンド サーバーに送信する方法がたくさんあります。その中で、最も一般的な方法は、フォームの onsubmit メソッドを使用して送信操作を実行することです。この記事では、PHP でフォーム データを送信するための onsubmit メソッドの使用方法を紹介し、読者の理解を深めるのに役立ついくつかの例を示します。

1. 基本的な紹介

PHP で onsubmit メソッドを使用するには、onsubmit イベントを form タグに追加し、JavaScript 関数を呼び出す必要があります。

onsubmit イベントは、フォームが送信されるとトリガーされます。フォーム入力が有効な場合、onsubmit イベントは true を返し、送信が成功したことを示します。それ以外の場合は、送信が失敗したことを示す false が返されます。フォーム データの正確性と完全性を保証するために、通常、フォーム データはバックエンド サーバーに送信される前に検証および処理されます。

2. 実装手順

onsubmit メソッドを使用してフォーム データを送信するためのいくつかの手順を次に示します:

1. 必要なデータを含む HTML フォームを作成します。提出すること。
2. onsubmit イベントを form 要素に追加し、呼び出す JavaScript 関数を指定します。
3. フォームが送信されると JavaScript 関数が呼び出され、フォーム データを取得してバックエンド サーバーに送信します。

3. 分析例

以下では例を使用して、onsubmit メソッドの使用法を示します。次の HTML フォームがあるとします。

<form method="post" action="submit.php" onsubmit="return validateForm()">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">电子邮件：</label>
  <input type="email" id="email" name="email">
  <br>
  <input type="submit" value="提交">
</form>

このフォームには、名前用と電子メール用の 2 つの入力ボックスが含まれています。フォームの onsubmit イベントで、validateForm という名前の JavaScript 関数を呼び出して、フォーム データの有効性を確認します。この関数は、フォーム データが検証された場合は true を返し、そうでない場合は false を返します。この関数の実装コードは次のとおりです。

function validateForm() {
  let name = document.getElementById("name").value.trim();
  let email = document.getElementById("email").value.trim();

  if (name === "" || email === "") {
    alert("请输入姓名和电子邮件");
    return false;
  } else if (!email.match(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/)) {
    alert("请检查电子邮件格式");
    return false;
  } else {
    return true;
  }
}

この関数は、まず入力ボックス内の名前と電子メールを取得します。次に、両方のフィールドを検証します。入力ボックスの値が空の場合、この関数はユーザーに名前と電子メールの入力を求めるダイアログ ボックスをポップアップ表示します。電子メールの形式が正しくない場合は、ダイアログ ボックスも表示されます。それ以外の場合、この関数は true を返します。

この関数によって返される結果は、フォームが送信される前に決定されることに注意してください。この関数が true を返した場合、フォーム データは action 属性で指定された URL に送信されます。そうしないと、フォーム データは送信されません。

バックエンド サーバーはフォーム データを受信すると、それに応じてそれを処理できます。フォーム データを送信するコードは submit.php ファイルに記述できます。

<?php
  $name = $_POST["name"];
  $email = $_POST["email"];

  echo "您的姓名是 " . $name;
  echo "您的电子邮件是 " . $email;
?>

このコードは非常に単純で、送信された名前と電子メールを取得して画面に出力するだけです。もちろん、実際のアプリケーションでは、より複雑な操作が実行される可能性があります。

4. 結論

この記事では、onsubmit メソッドを使用して PHP でフォーム データを送信する方法を紹介し、具体的な実装手順を示す例を示します。この記事の導入により、読者は onsubmit メソッドの基本的な使用法を習得し、フォームの送信と検証をより適切に実装できるようになります。

以上がonsubmit メソッドを使用して PHP でフォームデータを送信する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。