<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>add group forms</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
</head>
<body>
<div class='add-container'>
<div class="form-group-register">
<label for="key_people_data_name">imie</label>
<input type='text' name='key_people_data_name[]' class="register-input">
</div>
<div class="form-group-register">
<label for="key_people_data_surname">nazwisko</label>
<input type='text' name='key_people_data_surname[]' class="register-input">
</div>
<div class="form-group-register">
<label for="key_people_data_name">funkcja</label>
<select name="key_people_data_function[]" id="" class="register-input">
<option value="">--------------</option>
<option value="">jeden</option>
<option value="">dwa</option>
<option value="">trzy </option>
<option value="">tzry</option>
<option value="">cztery </option>
<option value="">piec</option>
<option value="">szesc</option>
</select>
</div>
<div class="form-group-register">
<label for="key_people_data_email">email</label>
<input type='text' name='key_people_data_function[]' class="register-input">
</div>
<div class="form-group-register">
<label for="key_people_data_phone">telefon</label>
<input type='text' name='key_people_data_function[]' class="register-input">
</div>
<hr>
</div>
<button id='add_group_form'>Add</button>
<script>
$(document).ready(function() {
var remove_Button = "<button class='remove_group_form'>Remove</button>";
var max_fields = 5;//max add group inputs
var lenght = 1;
$('#add_group_form').click(function() {
if(lenght < max_fields){
lenght++;
$('div.add-container:last').after($('div.add-container:first').clone());
$('div.add-container:last').append(remove_Button);
}
});
$('body').on('click','.remove_group_form', function() {
lenght--;
$(this).closest('div.add-container').remove();
});
});
</script>
</body>
</html>Komentarze wyłączone