[JS]フォームの項目をユーザーが追加・削除できるようにするスクリプト -SheepIt!

複数の電話番号や住所などを入力できる、フォームの項目をユーザーが追加・削除できるようにするjQueryのプラグインを紹介します。

SheepIt! - Form Cloning Jquery Plugin
デモページ

[ad#ad-2]

SheepIt!の特徴

• フォームのアイテムを追加したり、削除することができます。
• フォームのアイテムの数をコントロールできます。
• フォームのコードは通常のHTMLで実装します。
• フォームのアイテムにデータをロードすることができます。
• コールバック機能を備えています。

SheepIt!の実装

前述のデモのHTMLは、下記のようになります。

HTML

フォームの箇所は通常のHTMLです。

<!-- sheepIt Form -->
<div id="sheepItForm">
 
  <!-- Form template-->
  <div id="sheepItForm_template">
    <label for="sheepItForm_#index#_phone">Phone <span id="sheepItForm_label"></span></label>
    <input id="sheepItForm_#index#_phone" name="person[phones][#index#][phone]" type="text"/>
    <a id="sheepItForm_remove_current">
      <img class="delete" src="images/cross.png" width="16" height="16" border="0">
    </a>
  </div>
  <!-- /Form template-->
   
  <!-- No forms template -->
  <div id="sheepItForm_noforms_template">No phones</div>
  <!-- /No forms template-->
   
  <!-- Controls -->
  <div id="sheepItForm_controls">
    <div id="sheepItForm_add"><a><span>Add phone</span></a></div>
    <div id="sheepItForm_remove_last"><a><span>Remove</span></a></div>
    <div id="sheepItForm_remove_all"><a><span>Remove all</span></a></div>
    <div id="sheepItForm_add_n">
      <input id="sheepItForm_add_n_input" type="text" size="4" />
      <div id="sheepItForm_add_n_button"><a><span>Add</span></a></div></div>
  </div>
  <!-- /Controls -->
   
</div>
<!-- /sheepIt Form -->

外部ファイル

SheepIt!はjQueryのプラグインのため、実装にはjquery.jsが必要です。

<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" src="jquery.sheepItPlugin-1.0.0.min.js"></script>

JavaScipt

$(document).ready(function() {
     
    var sheepItForm = $('#sheepItForm').sheepIt({
        separator: '',
        allowRemoveLast: true,
        allowRemoveCurrent: true,
        allowRemoveAll: true,
        allowAdd: true,
        allowAddN: true,
        maxFormsCount: 10,
        minFormsCount: 0,
        iniFormsCount: 2
    });
 
});

サイトでは他にも多くのデモや実装例が紹介されており、各コードもダウンロードできます。
SheepIt!のデモ一覧