jquery.add-input-area

jQuery plugin to add or delete form fields.

フォーム部品を動的に追加・削除します。

github repository npm version

Basic 基本

Please follow the naming convention below.

増減させる対象のエリア、追加ボタン、削除ボタンのCSSクラス名は、
命名規則に従うことでプラグインに渡すオプションの数を減らすことができます。

HTML
<ol id="list">
  <li class="list_var">
    <input type="text" size="40" name="list_0" id="list_0">
    <button class="list_del">Delete</button>
  </li>
</ol>
<input type="button" value="Add" class="list_add">

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="jquery.add-input-area.min.js"></script>
JavaScript
$('#list').addInputArea();
Change naming convention 命名規則を変更する

You can change naming convention by setting options.
Please look at "README" for details.

Note: (since v4.9.0)
  • Recommend: data-id-format, data-name-format
  • Deprecated: id_format, name_format

命名規則はオプションで変更できます。
詳しくは"README"をご覧ください。

注意: (since v4.9.0)
  • 推奨: data-id-format, data-name-format
  • 非推奨: id_format, name_format
<ol id="list">
  <li class="var_area02">
    <label
      for="posts_0_mail"
      data-id-format="posts_%d_mail"
    >Mail</label>
    <textarea
      id="posts_0_mail"
      data-id-format="posts_%d_mail"
      name="data[posts][mail][0]"
      data-name-format="data[posts][mail][%d]"
    ></textarea>
    <button class="del_button02">Delete</button>
  </li>
</ol>
<input type="button" value="Add" class="add_button02"><br>
JavaScript
$('#list').addInputArea({
  area_var: '.var_area02',
  btn_add: '.add_button02',
  btn_del: '.del_button02'
});
CSS and images CSSや画像による装飾

You can use freely CSS and images.

追加ボタン、削除ボタンはCSSや画像で自由に装飾できます。

HTML
<ul id="list">
  <li class="list_var">
    <input type="text" size="40" name="list_0">
    <img class="list_del" src="demo/img_del.png">
  </li>
</ul>
<!-- Twitter Bootstrap -->
<a href="javascript:void(0)" class="list_add btn btn-danger">Add</a><br>
JavaScript
$('#list').addInputArea();
Wrapper for del-button 削除ボタンのラッパー要素

If ther wrapper for del-button exists, set area_del option.

削除ボタンが裸でなくラッパーが存在する場合は、area_delオプションを設定してください。

HTML
<table id="list" class="table">
  <thead>
    <tr><th>Name</th><th>Mail</th><th></th></tr>
  </thead>
  <tbody>
    <tr class="list_var">
      <td><input type="text" name="list-name_0"></td>
      <td><input type="text" name="list-mail_0"></td>
      <td class="del-area"><button class="list_del">Delete</button></td>
    </tr>
  </tbody>
</table>
JavaScript
$('#list').addInputArea({
  area_del: '.del-area'
});
Maximum number 追加に上限を設ける

You can set the maximum number of textbox.

追加できるテキストボックスの数に上限を設けることができます。

JavaScript
$('#list').addInputArea({
  maximum : 4
});
All Form elements 全てのフォーム部品に対応

You can add or delete all of Form elements.

テキストボックスだけでなく、すべてのフォーム部品を増減できるようになりました。

HTML
<div id="list">
  <div class="list_var">

    <input type="checkbox" name="list_checkbox_a_0" value="AAA">
    <input type="checkbox" name="list_checkbox_b_0" value="BBB">
    <input type="checkbox" name="list_checkbox_c_0" value="CCC">

    <select name="list_select_0">
      <option value="AAA">AAA</option>
      <option value="BBB">BBB</option>
      <option value="CCC">CCC</option>
    </select>
Not to initialize value値を初期化させない設定

You can prevent initialization.
Note: Since v4.9.0, empty_val is deprecated. Use data-empty-val.

入力欄を増やす際、初期化を阻止できます。
注意: v4.9.0以降、empty_valは非推奨です。data-empty-valを使ってください。

HTML
<li class="list_var">
  <input type="text" name="list_a_0" >
  <input type="text" name="list_b_0" data-empty-val="false">
</li>
Initialize correctly 正しい初期化

(since: v4.2)

The added item can be correctly initialized.

追加された要素の初期化が、より正確に行われるようになりました。

HTML
<li class="list_var">
  <select name="list_mask_0">
    <option value="enable">enable</option>
    <option value="disable">disable</option>
  </select>
  <input type="text" name="list_text_0">
</li>
JavaScript
$('#list')
  .addInputArea()
  .on('change', 'select', function() {
    $(this).next().prop('disabled', $(this).val() == 'disable');
  });
Copy jQuery event handlers jQueryイベントハンドラの複製

(since: v4.3)

jQuery event handlers at each form elements can be correctly copied.
But, you should set events before applying plugin.

フォーム部品に対して設定したjQueryのイベントハンドラも複製されます。
ただし、クローン元へのイベントは、プラグイン適用前に
設定しておかなければなりません。

JavaScript (1)
// Set events before apply plugin.
$('#list_0')
  .focus(function() {
    $(this).next().text('Focus!');
  })
  .blur(function() {
    $(this).next().text('Blur!');
  });
$('#list').addInputArea();
JavaScript (2)
// You would better write like this.
$('#list')
  .addInputArea()
  .on('focus', '[type=text]', function() {
    $(this).next().text('Focus!');
  })
  .on('blur', '[type=text]', function() {
    $(this).next().text('Blur!');
  });
Run after add 追加後に処理を実行する

(since v4.6)

The event at each Form elements can be correctly copied.
But it is uncertain in the case of the event which made in other jQuery plugin.
You can reset other jQuery plugin to added item by this option.

初期状態でも通常イベントならばクローン先にもコピーされますが、他のjQueryプラグインなどを利用した複雑なイベントはコピーされないことがあります。
その場合はこのオプションの中でjQueryプラグインを適用し直してください。

JavaScript
$('#list').addInputArea({
  after_add: function () {
    alert('Added!');
  }
});
Not to copy events イベントを複製しないオプション

(since: v4.8)

You can set not to copy events.
For example, to copy correctly an element which applied "tooltip()" of Bootstrap, you should use this and "after_add" options.

オプションでイベントを複製させないようにできます。
たとえば、Bootstrapの"tooltip()"を適用した要素を正常に複製するには、このオプションと"after_add"オプションを組み合わせて使います。

JavaScript
// Set Bootstrap tooltip before apply plugin.
$('#list .test-tooltip').tooltip();
$('#list').addInputArea({
  clone_event: false,
  after_add: function () {
    $('#list .test-tooltip').tooltip();
  }
});
Not to copy elements HTML要素を複製しないオプション

(since: v4.10)

You can prevent to copy certain elements.
Set dont_clone option.

特定のHTML要素を複製させないようにできます。
dont_cloneオプションを設定してください。

HTML
<div>This will be cloned.</div>
<div class="dont_clone">This will NOT be cloned.</div>
JavaScript
$('#list').addInputArea({
  dont_clone: '.dont_clone'
});
Validation バリデーション

(since: v4.11)

You can validate before adding.
Set validate option that returns boolean.

入力欄の追加の前にバリデーションを実行できます。
真偽値を返すvalidateオプションを設定してください。

The sample above uses checkValidity() method of HTML5.
In this case, you must create <form> and submit-button.
You can use other validation method as well.

上のサンプルではHTML5のcheckValidity()メソッドを利用しています。
この場合は、<form>と送信ボタンが必要です。
HTML5以外のバリデーションを利用することもできます。

JavaScript
$('#list').addInputArea({
  validate: function () { // Should return boolean.
    // Call checkValidity() method of HTML5.
    if (!$('.form-serialize')[0].checkValidity()) {
      $('#submit').click();
      return false;
    }
    return true;
  }
});