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

2019-08-21    42   68

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

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

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

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

カテゴリ: jQuery

comment 登録なしでご自由にご入力いただけます(^^)ぜひぜひ記事のご感想をお聞かせ下さい。

お名前とコメントは入力必須です。

コメントの文字数が短すぎます。

この内容でコメントを送る
コメントをする
この記事がお役に立てましたら是非シェアのご協力お願いします。