Add/Remove Input Fields Dynamically with jQuery

Advertisement

Thêm / xóa các trường đầu vào một cách linh hoạt với jQuery. Nếu bạn đang tìm cách thêm và xóa các trường nhập trùng lặp, đây là một ví dụ jQuery khác bên dưới để thực hiện nhiệm vụ cho bạn. Đoạn mã jQuery này thêm động các trường đầu vào trùng lặp và dừng khi đạt đến mức tối đa.

Quá trình này khá đơn giản. Chúng tôi bắt đầu với 1 trường đầu vào và cho phép người dùng thêm nhiều trường hơn cho đến khi số lượng đạt đến mức tối đa. Quá trình tương tự đi đến nút xóa, khi nhấp vào, nó sẽ loại bỏ trường văn bản hiện tại bằng cách loại bỏ phần tử cha, là phần tử div .

 $(document).ready(function() {
	var max_fields      = 10; //maximum input boxes allowed
	var wrapper   		= $(".input_fields_wrap"); //Fields wrapper
	var add_button      = $(".add_field_button"); //Add button ID
	
	var x = 1; //initlal text box count
	$(add_button).click(function(e){ //on add input button click
		e.preventDefault();
		if(x < max_fields){ //max input box allowed
			x++; //text box increment
			$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
		}
	});
	
	$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
		e.preventDefault(); $(this).parent('div').remove(); x--;
	})
});

Đây là mã HTML bạn cần đặt trong thẻ BODY của trang của mình, trong thẻ FORM:

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div><input type="text" name="mytext[]"></div>
</div>

Chúng tôi bắt đầu với một trường Nhập liệu duy nhất và nút “Thêm trường khác” để cho phép người dùng thêm nhiều trường hơn. Trường nhập văn bản được gói trong phần tử div , như đã giải thích ở trên, khi nhấp vào nút xóa, nó tìm thấy phần tử cha, là phần tử div và loại bỏ nó.

Comment của bạn

avatar
  Theo Dõi  
Thông báo