jquery.add-input-area

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();

<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'
});

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();

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'
});

You can set the maximum number of textbox.

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

JavaScript

$('#list').addInputArea({
  maximum : 4
});

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>

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>

(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');
  });

(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!');
  });

(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!');
  }
});

(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();
  }
});

(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'
});

(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;
  }
});