Thêm và xóa input field động sử dụng JQuery

Trong một số trường hợp nhất định bạn cần thêm động các field trong một form để giải quyết các công việc nào đó. e.g bạn cho phép người dùng có thể nhập vào nhiều câu trả lời, hay nhiều địa chỉ, chọn nhiều file để upload nên server-side. Trong hướng dẫn này mĩnh sẽ viết một script để có thể thêm các input fields và gỡ bỏ nó một cách dễ dàng. Mình sẽ sử dụng jQuery để làm cho tính năng này rất ngắn, đơn giản.

1. JavaScript

Đầu tiên bạn cần nhúng vào thư viện của JQuery.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Nhìn vào script bên dưới mình có một số lưu ý sau.

• maxField: Khai báo số input filed tối đa.
• counter(x). Biến tăng khi người dùng click vào addButton

Mỗi khi người dùng click vào addButton thì chúng ta sẽ kiểm tra xem counter(x). Nếu counter(x) nhỏ hơn maxField thì chúng ta sẽ append một fieldHTML vào wrapper đồng thời tăng biến counter(x).

<script type="text/javascript">
	$(document).ready(function(){
		// Khai báo số Input tối đa
		var maxField = 10; 
		// HTML append
		var fieldHTML = '<div class="form-group"><input type="text" name="field_name[]" value=""/> <a href="javascript:void(0);" class="remove_button" title="Remove field"><img src="remove-icon.png"></a></div>';
		var x = 1; // Khai báo couter, mặc định = 1.
		$('.add_button').click(function(){
			if(x < maxField){ //Kiểm tra couter có vượt quá maxField không.
				x++; // Tăng biến couter
				$('.form-wrapper').append(fieldHTML); // Thêm field HTML
			}
			return false;
		});
		// Khi click vào nút xóa
		$(document).on('click', '.remove_button', function(e){ 
			e.preventDefault();
			$(this).parent('.form-group').remove(); // Gỡ bỏ input field
			x--; // Giảm biến field couter
		});
	});
</script>

HTML.

<div class="form-wrapper">
    <div class="form-group">
        <input type="text" name="field_name[]" /> 
        <a href="javascript:void(0)" class="add_button" title="Thêm field">
            <img src="add-icon.png" />
        </a>
    </div>
</div>

Tổng kết.

Có lẽ với nhiều bạn đây là một chức năng khá đơn giản có thể gẩy tay 5 phút là xong. Nhưng đối với mình thì nó có cả một câu truyện về ngày đầu tiên đi làm và sếp bảo sửa chức năng này đã có sẵn rồi nhưng hồi đó người ta viết bằng Javascipt thuẩn. Và kết quả là hồi đó đã không làm được :)