jQuery Multifield Example

Plugin Init

<script>
$('#wrapper').multifield({
	section: '.section',
	btnAdd:'.btnAdd',
	btnRemove:'.btnRemove'
});
</script>

Plugin Options

Option	Type	Default	Description
section	string	null	REQUIRED Selector of the section which is located inside of the parent wrapper
btnAdd	string	null	REQUIRED Selector of the "Add section" button - can be located everywhere on the page
btnRemove	string	null	REQUIRED Selector of the "Remove section" button - should be located INSIDE of the "section"
max	integer	0	Maximum section
locale	string	'default'	Language to use, default is english

Basic usage #1 (HTML5 data-attribute options) SOURCE

<div id="example-1" class="content" data-mfield-options='{"section": ".group","btnAdd":"#btnAdd-1","btnRemove":".btnRemove"}'>
	<div class="row">
		<div class="col-md-12"><button type="button" id="btnAdd-1" class="btn btn-primary">Add section</button></div>
	</div>
	<div class="row group">
		<div class="col-md-2">
			<input class="form-control" type="text">
		</div>
		<div class="col-md-2">
			<input class="form-control" type="text">
		</div>
		<div class="col-md-4">
			<textarea></textarea>
		</div>
		<div class="col-md-3">
			<button type="button" class="btn btn-danger btnRemove">Remove</button>
		</div>
	</div>
</div>

<script>
$('#example-1').multifield();
</script>

Basic usage #2 (JavaScript options) SOURCE

<div id="example-2" class="content">
	<div class="row">
		<div class="col-md-12"><button type="button" id="btnAdd-2" class="btn btn-primary">Add section</button></div>
	</div>
	<div class="row group">
		<div class="col-md-2">
			<input class="form-control" type="text">
		</div>
		<div class="col-md-2">
			<input class="form-control" type="text">
		</div>
		<div class="col-md-4">
			<textarea></textarea>
		</div>
		<div class="col-md-3">
			<button type="button" class="btn btn-danger btnRemove">Remove</button>
		</div>
	</div>
</div>

<script>
$('#example-2').multifield({
	section: '.group',
	btnAdd:'#btnAdd-2',
	btnRemove:'.btnRemove'
});
</script>

Example #3 (The maximum sections count) SOURCE

You can set maximum sections count via 'max' option.

<div id="example-3" class="content">
	<div class="row">
		<div class="col-md-12"><button type="button" id="btnAdd-3" class="btn btn-primary">Add section</button></div>
	</div>
	<div class="row group">
		<div class="col-md-2">
			<input class="form-control" type="text">
		</div>
		<div class="col-md-2">
			<input class="form-control" type="text">
		</div>
		<div class="col-md-4">
			<textarea></textarea>
		</div>
		<div class="col-md-3">
			<button type="button" class="btn btn-danger btnRemove">Remove</button>
		</div>
	</div>
</div>

<script>
$('#example-3').multifield({
	section: '.group',
	btnAdd:'#btnAdd-3',
	btnRemove:'.btnRemove',
	max: 3
});
</script>

Example #4 (Localization) SOURCE

You can translate confirmation message which appears on section remove.

To do so just pass an object with translated strings through the 'locale' option.

<div id="example-4" class="content">
	<div class="row">
		<div class="col-md-12"><button type="button" id="btnAdd-4" class="btn btn-primary">Добавить</button></div>
	</div>
	<div class="row group">
		<div class="col-md-2">
			<input class="form-control" type="text">
		</div>
		<div class="col-md-2">
			<input class="form-control" type="text">
		</div>
		<div class="col-md-4">
			<textarea></textarea>
		</div>
		<div class="col-md-3">
			<button type="button" class="btn btn-danger btnRemove">Удалить</button>
		</div>
	</div>
</div>

<script>
$('#example-4').multifield({
	section: '.group',
	btnAdd:'#btnAdd-4',
	btnRemove:'.btnRemove',
	locale:{
          "multiField": {
            "messages": {
              "removeConfirmation": "Вы уверены, что вы хотите удалить этот элемент?"
            }
          }
        }
});
</script>

Example #5 (Advanced) SOURCE

To use radio buttons you should add numeric value to their names, for example: name="group[0]"

Add "reset-image-src" class to image to reset image src

<div id="example-5" class="content">
	<div class="row">
		<div class="col-md-12"><button type="button" id="btnAdd-5" class="btn btn-primary">Add section</button></div>
	</div>
	<div class="row group">
		<div class="col-md-2">
			<select name="select_example[]">
				<option value="1">Option 1</option>
				<option value="2">Option 2</option>
				<option value="3">Option 3</option>
			</select>
		</div>
		<div class="col-md-2">
			<input type="radio" name="radio_example[0]" value="1"> Option 1 <br>
			<input type="radio" name="radio_example[0]" value="2"> Option 2 <br>
			<input type="radio" name="radio_example[0]" value="3"> Option 3 <br>
		</div>
		<div class="col-md-3">
			<p>Image src will not be cleared</p>
			<img class="media-object" alt="64x64" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNGU0MzRkMDhhOCB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE0ZTQzNGQwOGE4Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxNC41IiB5PSIzNi41Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="  style="width: 64px; height: 64px;">
		</div>
		<div class="col-md-2">
			<p>Image src will be cleared</p>
			<img class="media-object reset-image-src" alt="Image" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNGU0MzRkMDhhOCB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE0ZTQzNGQwOGE4Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxNC41IiB5PSIzNi41Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" style="width: 64px; height: 64px;">
		</div>
		<div class="col-md-2">
			<button type="button" class="btn btn-danger btnRemove">Remove</button>
		</div>
	</div>
</div>

<script>
$('#example-5').multifield({
	section: '.group',
	btnAdd:'#btnAdd-5',
	btnRemove:'.btnRemove',
});
</script>

Option 1
Option 2
Option 3

Image src will not be cleared

Image src will be cleared

Example #6 (Handling data with PHP) SOURCE

<form method="post">
<div id="example-6" class="content">
	<div class="row">
		<div class="col-md-12"><button type="button" id="btnAdd-6" class="btn btn-primary">Add Employee</button></div>
	</div>
	<div class="row group">
		<div class="col-md-2">
			<div class="form-group">
				<label>Name<input class="form-control" class="form-control" type="text" name="user_name[]"></label>
			</div>
		</div>
		<div class="col-md-2">
			<label>Gender
			<select name="user_gender[]" class="form-control">
				<option value="">Please select..</option>
				<option value="male">Male</option>
				<option value="female">Female</option>
			</select>
			</label>
		</div>
		<div class="col-md-4">
			<div class="col-md-2">
				<div class="radio">
					<label><input type="radio" name="user_role[0]" value="manager"> Manager </label>
				</div>
				<div class="radio">
					<label><input type="radio" name="user_role[0]" value="editor"> Editor </label>
				</div>
				<div class="radio">
					<label class="checkbox-inline"><input type="radio" name="user_role[0]" value="writer"> Writer </label>
				</div>
			</div>
		</div>
		<div class="col-md-3">
			<button type="button" class="btn btn-danger btnRemove">Remove</button>
		</div>
	</div>
</div>
</form>

<script>
$('#example-6').multifield({
	section: '.group',
	btnAdd:'#btnAdd-6',
	btnRemove:'.btnRemove',
});
</script>

<?php var_dump($_POST); ?>

OUTPUT :

  'user_name' =>
    array (size=5)
      0 => string 'John Doe' (length=8)
      1 => string 'Alice Smith' (length=11)
      2 => string 'Jason Louis' (length=11)
      3 => string 'Bob Freeman' (length=11)
      4 => string 'Jane Watkins' (length=12)
  'user_gender' =>
    array (size=5)
      0 => string 'male' (length=4)
      1 => string 'female' (length=6)
      2 => string 'male' (length=4)
      3 => string 'male' (length=4)
      4 => string 'female' (length=6)
  'user_role' =>
    array (size=5)
      0 => string 'manager' (length=7)
      1 => string 'editor' (length=6)
      2 => string 'writer' (length=6)
      3 => string 'writer' (length=6)
      4 => string 'writer' (length=6)

// Get information about the first record
$_POST['user_name'][0]; // John Doe
$_POST['user_gender'][0]; // male
$_POST['user_role'][0]; // manager

Name

Gender

Manager

Editor

Writer

jQuery Multifield Plugin