jquery.add-input-area

1. Delete

HTML

<ol id="list1">
  <li class="list1_var">
    <input type="text" size="40" name="list1_0" id="list1_0">
    <button class="list1_del">Delete</button>
  </li>
</ol>
<input type="button" value="Add" class="list1_add">

JavaScript

$('#list1').addInputArea();

You can save time and effort by following naming convention.

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

1. Mail Delete

HTML

<ol id="list2">
  <li class="var_area02">
    <label
      for="posts_0_mail"
      id_format="posts_%d_mail"
    >Mail</label>
    <textarea
      id="posts_0_mail"
      id_format="posts_%d_mail"
      name="data[posts][mail][0]"
      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

$('#list2').addInputArea({
  area_var: '.var_area02',
  btn_add: '.add_button02',
  btn_del: '.del_button02'
});

You can set options for plug-in.
Please look at "README" for details.

プラグインにはオプションを渡すことができます。

• 

Add

HTML

<ul id="list3">
  <li class="list3_var">
    <input type="text" size="40" name="list3_0">
    <img class="list3_del" src="demo/img_del.png">
  </li>
</ul>
<!-- Twitter Bootstrap -->
<a href="javascript:void(0)" class="list3_add btn btn-danger">Add</a><br>

JavaScript

$('#list3').addInputArea();

You can decorate add-button and delete-button with CSS or images.

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

Name	Mail
		Delete

HTML

<table id="list4" class="table">
  <thead>
    <tr><th>Name</th><th>Mail</th><th></th></tr>
  </thead>
  <tbody>
    <tr class="list4_var">
      <td><input type="text" name="list4_name_0"></td>
      <td><input type="text" name="list4_mail_0"></td>
      <td class="del_area04"><button class="list4_del">Delete</button></td>
    </tr>
  </tbody>
</table>

JavaScript

$('#list4').addInputArea({
  area_del: '.del_area04'
});

The list can be fluctuated even if how many input-area were contained.

複数の入力欄を扱う場合も、特にオプションを必要としません。

You can set the maximum number of textbox.

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

1. Delete

JavaScript

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

You can add or delete all of Form elements.

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

You can prevent initialization.
Please click "Add" button.

入力欄を増やす際、初期化を阻止することができます。

1. 
   
   Delete

However, the following elements and types will certainly be initialized.

ただし、以下の要素、タイプは、必ず初期化されてしまいます。

textarea, select, file, color

HTML

<li class="list7_var">
  <input type="text" size="40" name="list7_a_0"
    value="will be initialized."><br>
  <input type="text" size="40" name="list7_b_0"
    value="will NOT be initialized." empty_val="false"><br>
  <button class="list7_del">Delete</button>
</li>

JavaScript

$('#list7').addInputArea();

(v4.2 or later) The added item can be correctly initialized.

(v4.2以降) 追加された要素の初期化が、より正確に行われるようになりました。

1. able disable Delete

HTML

<li class="list8_var">
  <select name="list8_mask_0">
    <option value="able">able</option>
    <option value="disable">disable</option>
  </select>
  <input type="text" size="30" name="list8_text_0">
  <button class="list8_del">Delete</button>
</li>

JavaScript

$('#list8').addInputArea();
$('#list8').on('change', 'select', function() {
  var input = $(this).parents('li').find('[type="text"]');
  if ($(this).val() == 'disable') {
    $(input).attr('disabled', 'disabled');
  } else {
    else $(input).removeAttr('disabled');
  }
});

(v4.3 or later)
The event at each Form elements can be correctly copied.
But, you should set events before applying plugin.

(v4.3 以降)
フォーム部品に対して設定したイベントもコピーされます。
ただし、クローン元へのイベントは、プラグイン適用前に
設定しておかなければなりません。

1. Delete

JavaScript

// Set events before applying plugin.
$('#list9_0')
  .focus(function() { $(this).next().text('Focus!') })
  .blur(function() { $(this).next().text('Blur!') });
$('#list9').addInputArea();

(v4.6 or later)
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.

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

1. Delete

JavaScript

$('#list10').addInputArea({
  after_add: function () {
    alert('Added!');
  }
});