Jqueryでsubmitを行う際に、inputタグを追加する方法

##書こうと思った理由
Jqueryでsubmitを行い、submit先に応じて異なる情報を渡したい時があり、inputタグを追加する方法で実装を行ったので、自分のメモとしてまとめておこうと思いました。

##参考コード

index.html

 <form action="~~~~" method="POST">
    <input type="hidden" name="果物" value="りんご">
    <input type="hidden" name="趣味" value="テニス">
  
    <button class="fruit" type="button" title="果物"></button>
　　<button class="hobby" type="button" title="趣味"></button>
 </form>

jquery

<script>
$('.fruit').on('click',function(){
  var $form = $(this).parents('form');
  $("<input>",{type:"hidden", name:"果物", value:みかん,}).appendTo($form);
  $form.submit();
  });

$('.hobby').on('click',function(){
  var $form = $(this).parents('form');
  $("<input>",{type:"hidden", name:"趣味", value:映画,}).appendTo($form);
  $form.submit();
  });

</script>

##説明

まず、form内に2つのボタンを用意します。

<button class="fruit" type="button" title="果物"></button>
<button class="hobby" type="button" title="趣味"></button>

「果物」のボタンをクリックしたときには、下記の情報も追加で渡したいときがあったとします。

<input type="hidden" name="果物" value="みかん">

なので、jqueryでsubmitを実装するときに下記のように書きます。

$('.fruit').on('click',function(){
  var $form = $(this).parents('form');
  $("<input>",{type:"hidden", name:"果物", value:みかん,}).appendTo($form);
  $form.submit();
  });

これで、「果物」のボタンをクリックしたときだけ、追加でみかんの情報を持ったinputタグを追加することができます。