フォームのinputを増やしたり減らしたりするボタンを追加するJavascript(jquery)

javascript

@_yonecoです。フォームのコーディングをしていた際に、inputの項目をユーザーが増やしたり減らしたりできるようにしたいと思い、javascriptでできないかと調べていたときのメモです。

やってみたデモ

「+」のボタンを押すと入力欄が追加されていき、「−」のボタンを押すと入力欄が削除されます。

ソースコード

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on("click", ".add", function() {
    $(this).parent().clone(true).insertAfter($(this).parent());
});
$(document).on("click", ".del", function() {
    var target = $(this).parent();
    if (target.parent().children().length > 1) {
        target.remove();
    }
});
</script>

HTML

    <div id="input_pluralBox">
        <div id="input_plural">
            <input type="text" class="form-control" placeholder="サンプルテキストサンプルテキストサンプルテキスト">
            <input type="button" value="+" class="add pluralBtn">
            <input type="button" value="-" class="del pluralBtn">
        </div>
    </div>

CSS

#input_plural {
    margin: 10px 0;
}

#input_plural input.form-control {
    display: inline-block;
    width: 75%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    color: #555;
}

#input_plural input.pluralBtn {
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 5px;
    padding: 0;
    margin: 0;
}
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
yoneco

@_yonecoです。都内で働くWebデザイナー&ディレクターです。暇な時はサイトを更新したり動画を撮ったり落書きしたりイベントに出かけたりしています。お気軽にお声掛けくださいな

yonecoをフォローする
javascriptメモ
この記事を共有(シェア)する
ウェブ屋の日常

コメント

  1. たけだい より:

    はじめまして。
    フォームに文字を入力したまま増やすとその文字ごとコピーされてしまうのですが、空欄のフォームのみ増やす方法を教えていただけないでしょうか?

  2. こちらお返事遅れました!たしかに紹介しているやり方だとフォームに文字を入力したあとに増やすと、文字ごと複製されてしまいますね…!

    このやり方とは違うのですが、jQueryプラグインのSheepIt!でしたら、文字が入力されていても空欄のフォームを増やすことが可能ですので、
    よかったら以下よりダウンロードして試してみてくださいませ!
    https://github.com/mdelrosso/sheepit