【jQuery】フォームの入力項目をボタンで追加する方法(追加する数の上限が決まっている場合限定)

2019-08-21 610 1527

入力、選択などのinput、selectの項目を追加ボタンで増やす方法のご紹介。管理画面を作成する上で、ちょくちょく必要となるのでメモ代わりにコードを残します。

ボタンをわざわざユーザーに押させるというのはちょっと古いですが、自動認識で増やしていくより、断然手軽です。システムを作る際に、「完成までの速さ」を求めるならこの方法もいいのではないでしょうか。

デモはこちら

<!----><!----><form method="post" action="?" enctype="multipart/form-data">

    <ul class="cf">

        <li><input type="file" name="upfile[]" accept="image/*"></li>

        <li class="d-none"><input type="file" name="upfile[]" accept="image/*"></li>

        <li class="d-none"><input type="file" name="upfile[]" accept="image/*"></li>

        <li class="d-none"><input type="file" name="upfile[]" accept="image/*"></li>

        <li class="d-none"><input type="file" name="upfile[]" accept="image/*"></li>

    </ul>

    <button type="button" class="add"><i class="fas fa-plus"></i> 画像追加</button>

    <button type="button" class="exe"><i class="fas fa-cloud-upload-alt"></i> 画像アップロード</button>

</form>



<!----><!----><script src="/js/jquery.min.js"></script>

<!----><!----><script>

$(function(){

    //追加ボタンの動作

    $('.add').click(function(){

        $(this).prev('ul').find('.d-none:first').removeClass('d-none'); // ※1

    });

    

    //アップロード実行ボタンの動作

    $('.exe').click(function(){

        $(this).parent().submit();

    });

});

</script>

このコードでは５つまでファイルをアップできます。liタグを複製した分だけ上限を増やせます。
class名「d-none」はdisplay:none;が指定されています。
classは最低限のものだけしか付けていません。jqueryのprev・find・parentで要素を指定しています。

初心者の方に向けて、※1の解説をします。

追加ボタン（クラス名「add」）が押されたら、ひとつ手前の要素の中の一番最初のクラス名「d-none」を見つけて、クラス名を外す。という処理をしています。

複数のファイルをアップさせる場合は容量のことも考慮しなければいけません。
jQuery(javascript)複数ファイルのアップロード時に容量オーバーの場合はアラートを出す