jQuery Multifield Example

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.

Copy default.json file and rename it to locale_LOCALE.json (e.g. de_DE.json, pt_BR.json and etc.).

And then pass your locale name through the 'locale' option, for example: locale: 'de_DE'.

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