【JavaScript】フォームに hidden input を動的に追加する方法｜createElement・insertAdjacentHTML・FormData の使い分けと実践パターン解説

<form id="myForm">
  <input type="text" name="username">
  <button type="submit">送信</button>
</form>

const form = document.getElementById('myForm');

// input 要素を生成して属性をセット
const hidden = document.createElement('input');
hidden.type  = 'hidden';
hidden.name  = 'token';
hidden.value = 'abc123xyz';

// フォームに追加
form.appendChild(hidden);

function setHiddenField(form, name, value) {
  let input = form.querySelector(`input[name='${name}']`);
  if (!input) {
    input = document.createElement('input');
    input.type = 'hidden';
    input.name = name;
    form.appendChild(input);
  }
  input.value = value; // 既存なら値だけ更新
}

// 使い方
setHiddenField(form, 'page', '3');
setHiddenField(form, 'page', '4'); // 重複せず値が 4 に更新される

function addHiddenFields(form, fields) {
  const fragment = document.createDocumentFragment();
  Object.entries(fields).forEach(([name, value]) => {
    const input = document.createElement('input');
    input.type  = 'hidden';
    input.name  = name;
    input.value = String(value);
    fragment.appendChild(input);
  });
  form.appendChild(fragment); // DOM 更新は1回だけ
}

// 使い方
addHiddenFields(form, {
  utm_source: 'google',
  utm_medium: 'cpc',
  referrer: document.referrer,
});

form.insertAdjacentHTML('beforeend',
  '<input type="hidden" name="token" value="abc123xyz">');

// BAD: userInput に " name="evil" value="x" が入ると属性インジェクションが起きる
const userInput = getSomeValue();
form.insertAdjacentHTML('beforeend',
  `<input type="hidden" name="q" value="${userInput}">`);

function escapeAttr(str) {
  return String(str)
    .replace(/&/g, '&')
    .replace(/"/g, '"')
    .replace(/'/g, ''')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');
}

form.insertAdjacentHTML('beforeend',
  `<input type="hidden" name="q" value="${escapeAttr(userInput)}">`);

const form = document.getElementById('myForm');
const nameInput = form.querySelector('[name="username"]');
nameInput.addEventListener('input', () => console.log('入力中'));

// ユーザーが入力したあとに...
form.innerHTML += '<input type="hidden" name="token" value="x">';

// ↑ この時点で username の入力値・イベントリスナーが消える

// 本当に使う場合は先述の escapeAttr() でエスケープする
// ただし、この用途には createElement を使うほうがはるかに安全で明快

const form = document.getElementById('myForm');

form.addEventListener('submit', (e) => {
  // 送信時刻を付与
  setHiddenField(form, 'submitted_at', new Date().toISOString());

  // 現在のページ URL を付与
  setHiddenField(form, 'source_url', location.href);
});

function setHiddenField(form, name, value) {
  let input = form.querySelector(`input[name='${name}']`);
  if (!input) {
    input = document.createElement('input');
    input.type = 'hidden';
    input.name = name;
    form.appendChild(input);
  }
  input.value = value;
}

<form id="deleteForm">
  <input type="checkbox" class="item-cb" value="101"> 商品A
  <input type="checkbox" class="item-cb" value="102"> 商品B
  <input type="checkbox" class="item-cb" value="103"> 商品C
  <button type="submit">選択を削除</button>
</form>

const form = document.getElementById('deleteForm');

form.addEventListener('submit', (e) => {
  const checked = [...form.querySelectorAll('.item-cb:checked')]
    .map(cb => cb.value);

  if (checked.length === 0) {
    e.preventDefault();
    alert('削除する項目を選択してください');
    return;
  }

  setHiddenField(form, 'delete_ids', checked.join(','));
});

form.addEventListener('submit', async (e) => {
  e.preventDefault();

  // 送信前に hidden field を追加
  setHiddenField(form, 'action', 'create');

  // FormData が hidden input も自動収集
  const formData = new FormData(form);

  // デバッグ: 送信データを確認
  for (const [key, value] of formData.entries()) {
    console.log(key, value);
  }

  try {
    const res = await fetch('/api/submit', {
      method: 'POST',
      body: formData, // Content-Type は自動で multipart/form-data
    });
    const result = await res.json();
    console.log('送信成功:', result);
  } catch (err) {
    console.error('送信失敗:', err);
  }
});

// ① 通常の hidden input 値の受け取り
$pageNo    = (int)($_POST['page']    ?? 1);
$sortOrder = $_POST['sort_order']    ?? 'asc';

// ② CSRF トークン検証（hidden input を CSRF 対策に使う場合の例）
// セッションに保存したトークンと比較する
$submittedToken = $_POST['csrf_token'] ?? '';
$expectedToken  = $_SESSION['csrf_token'] ?? '';

// hash_equals() でタイミング攻撃を防ぎながら比較
if (empty($submittedToken) || !hash_equals($expectedToken, $submittedToken)) {
    http_response_code(403);
    exit('不正なリクエストです');
}

const form = document.getElementById('myForm');

// 読み取り（name 属性で取得）
const tokenInput = form.querySelector('input[name="token"]');
console.log(tokenInput?.value);

// 更新
if (tokenInput) tokenInput.value = 'newToken456';

// 削除
tokenInput?.remove();

// 全ての hidden input を取得
const allHidden = form.querySelectorAll('input[type="hidden"]');
allHidden.forEach(el => console.log(el.name, el.value));