JavaScript/jQueryでフォーム送信時の動作をカスタマイズする

2024-04-04

異なる処理を実行する
- ボタン1: 注文確定
- ボタン2: カートに入れる
異なるページに遷移する
- ボタン1: 次のステップへ進む
- ボタン2: キャンセル
異なるデータを送信する
- ボタン1: 通常の送信
- ボタン2: 下書きとして保存

実装方法

HTMLフォームで複数の送信ボタンを使うには、以下の2つの方法があります。

type属性

各送信ボタンにtype属性を設定することで、送信ボタンの種類を指定できます。

submit (デフォルト): 通常の送信ボタン
reset: フォーム内のすべての入力を初期化するボタン

例:

<form action="/action_page.php">
  <input type="text" name="name">
  <input type="text" name="email">
  <input type="submit" value="送信">
  <input type="reset" value="リセット">
</form>

name属性とvalue属性を組み合わせることで、送信ボタンごとに異なる値を送信できます。

<form action="/action_page.php">
  <input type="text" name="name">
  <input type="text" name="email">
  <input type="submit" name="action" value="submit" value="送信">
  <input type="submit" name="action" value="cancel" value="キャンセル">
</form>

この場合、送信ボタンをクリックすると、actionという名前の変数が送信され、その値がsubmitまたはcancelになります。

formaction属性: 送信先のURLを指定できます。
formmethod属性: 送信方法を指定できます (デフォルトはGET)。

HTMLフォームで複数の送信ボタンを使うことは、ユーザーインターフェースを改善し、ユーザーに複数の選択肢を提供するのに役立ちます。上記の解説を参考に、ぜひ試してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード</title>
</head>
<body>
  <form action="/action_page.php" method="post">
    <input type="text" name="name" placeholder="名前">
    <input type="text" name="email" placeholder="メールアドレス">
    <input type="submit" name="action" value="submit" value="送信">
    <input type="submit" name="action" value="cancel" value="キャンセル">
  </form>
</body>
</html>

このコードでは、以下の2つの送信ボタンがフォームに追加されています。

送信ボタン: フォームに入力されたデータをaction_page.phpに送信します。
キャンセルボタン: フォームをリセットします。

解説

name属性: 送信ボタンの名前を指定します。

実行

このコードをブラウザで開き、フォームに入力して送信ボタンをクリックすると、action_page.phpにデータが送信されます。キャンセルボタンをクリックすると、フォームに入力されたデータが消去されます。

このサンプルコードは基本的な例です。必要に応じて、formaction属性やformmethod属性などを追加して、送信ボタンの動作をカスタマイズすることができます。

JavaScriptを使用して、送信ボタンの動作をカスタマイズすることができます。例えば、以下のようなことができます。

送信ボタンをクリックした時に確認メッセージを表示する
送信ボタンをクリックした時にAjax通信を行う

<form action="/action_page.php">
  <input type="text" name="name">
  <input type="text" name="email">
  <input type="button" onclick="submitForm()" value="送信">
</form>

<script>
function submitForm() {
  // 送信ボタンをクリックした時の処理
  if (confirm("送信してもよろしいですか？")) {
    document.forms[0].submit();
  }
}
</script>

この例では、submitForm()というJavaScript関数を呼び出して、送信ボタンの動作をカスタマイズしています。

jQueryを使用すると、JavaScriptよりも簡単に送信ボタンの動作をカスタマイズすることができます。

<form action="/action_page.php">
  <input type="text" name="name">
  <input type="text" name="email">
  <input type="button" value="送信">
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$("input[type='button']").click(function() {
  // 送信ボタンをクリックした時の処理
  if (confirm("送信してもよろしいですか？")) {
    $(this).closest("form").submit();
  }
});
</script>