フォーム内の複数送信先処理

単一フォームで異なるアクション先を指定する必要がある場合、JavaScriptを使用した実装方法が有効です。以下に具体的な実装例を示します。

基本実装パターン

<form id="multiActionForm" method="post">
  <!-- フォーム要素 -->
  <input type="button" value="登録" onclick="setAction('register')">
  <input type="button" value="削除" onclick="setAction('remove')">
</form>

<script>
function setAction(operationType) {
  const form = document.getElementById('multiActionForm');
  
  switch(operationType) {
    case 'register':
      form.action = '/registration-endpoint';
      break;
    case 'remove':
      form.action = '/deletion-endpoint';
      break;
  }
  form.submit();
}
</script>

隠しフィールドを用いた高度な制御

<form id="dataQueryForm" method="post" onsubmit="return validateInputs()">
  <input type="hidden" id="queryMethod" name="queryMethod">
  
  <!-- 入力フィールド -->
  <input type="text" id="itemName" name="itemName" required>
  
  <!-- 操作ボタン -->
  <button type="button" onclick="prepareSubmission('cache')">キャッシュ検索</button>
  <button type="button" onclick="prepareSubmission('database')">DB直接検索</button>
</form>

<script>
function validateInputs() {
  const itemValue = document.getElementById('itemName').value.trim();
  return itemValue !== '';
}

function prepareSubmission(method) {
  document.getElementById('queryMethod').value = method;
  if(validateInputs()) {
    document.getElementById('dataQueryForm').submit();
  }
}
</script>