javascriptでformのinput部分を自動生成する

Web App

2020.11.29 2020.10.29

似たようなデータの組み合わせを異なるフォームで扱いたいとき

HTML 内が form だらけでカオス

HTML で submit することをやめ javascriptで submit すると form 文がすっきりする。それだけ。

font awesome で作ったアイコンを form 呼び出しボタンにしてみる。

javascript で click を監視し form を書き換えるよ。

$stu[*] は PHP の変数

<i class="edit fas fa-pencil-alt" data-id="'.$stu['id'].'"></i>

このボタン（ i.edit ）には data属性を書かず親要素（tr）を特定するための data-id だけ書いておく。

data-id から特定した親要素（ tr ）にデータ属性を好きなだけ書いておきます。他のボタンからも同じデータを参照（一元管理）できるようになります。

<tr class="student" id="'.$stu['id'].'" data-simei="'.$stu['simei'].'" data-furigana="'.$stu['furigana'].'" data-email="'.$stu['email'].'" data-tel="'.$stu['tel'].'">

見通しの良い場所に（どこでもいい）form を書いておきます。これは入れ物なので input 要素も不要です。中身は javascript で追加します。

<!-- i#edit ボタンクリックで input 要素が追加される  -->
<form id="edit" method="POST" action="class.php">
<!-- form 内の要素は全て js で append -->
</form>

フォームに input 要素を足す。フォームが完成したら class.php に向けて submit する仕組み。

<script>
$('i.edit').click(function(){
  let id = $(this).data('id');
  // i#edit 行の親要素 tr に書いてあるデータ属性を取得し
  let target = $("tr#"+id);
  let array = ['id','simei','furigana','email','tel'];
  // input 要素を生成する
  array.forEach(item=>$("form#edit").append('<input type="hidden" name="'+item+'" value="'+target.data(item)+'">'));
  // class.php へ submit する
  $('form#edit').submit();
});
</script>

完成

i.edit ボタンをクリックすると…

<!-- i#edit ボタンクリックで input 要素が追加される  -->
<form id="edit" method="POST" action="class.php">
  <input type="hidden" name="id" value="615">
  <input type="hidden" name="simei" value="●●●●">
  <input type="hidden" name="furigana" value="○○○○○○○○">
  <input type="hidden" name="email" value="○○○@milkmoo.info">
  <input type="hidden" name="tel" value="000-0000-0000">
  <!-- form 内の要素は js で append -->
</form>