Thêm động các yếu tố đầu vào vào biểu mẫu

Question 1

Tôi đã đọc nhiều blog và bài đăng về cách thêm động các tập trường, nhưng tất cả đều đưa ra một câu trả lời rất phức tạp. Những gì tôi yêu cầu không phải là phức tạp.

Mã HTML của tôi:

<input type="text" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails">Fill Details</a>

Vì vậy, người dùng sẽ nhập một giá trị số nguyên (tôi đang kiểm tra xác thực bằng javascript) vào inputtrường. Và khi nhấp vào Fill Detailsliên kết, số lượng trường nhập tương ứng sẽ xuất hiện để anh ta nhập. Tôi muốn đạt được điều này bằng cách sử dụng javascript.

Tôi không phải dân chuyên nghiệp về javascript. Tôi đang nghĩ làm cách nào để có thể lấy số nguyên được người dùng inputđiền vào trường thông qua liên kết và hiển thị số trường đầu vào tương ứng.

Question 2

Bạn có thể sử dụng onclicktrình xử lý sự kiện để lấy giá trị đầu vào cho trường văn bản. Đảm bảo bạn cung cấp cho trường một idthuộc tính duy nhất để bạn có thể tham khảo nó một cách an toàn thông qua document.getElementById():

Nếu bạn muốn thêm động các phần tử, bạn nên có một vùng chứa để đặt chúng. Ví dụ, a <div id="container">. Tạo các phần tử mới bằng cách document.createElement()sử dụng và dùng appendChild()để nối từng phần tử đó vào vùng chứa. Bạn có thể quan tâm đến việc xuất ra một namethuộc tính có ý nghĩa (ví dụ: name="member"+icho từng thuộc tính được tạo động <input>nếu chúng được gửi dưới dạng biểu mẫu.

Lưu ý rằng bạn cũng có thể tạo <br/>các phần tử với document.createElement('br'). Nếu bạn chỉ muốn xuất một số văn bản, bạn có thể sử dụng document.createTextNode()thay thế.

Ngoài ra, nếu bạn muốn xóa vùng chứa mỗi khi nó sắp có dân cư, bạn có thể sử dụng hasChildNodes()và removeChild()cùng nhau.

<html>
<head>
    <script type='text/javascript'>
        function addFields(){
            // Number of inputs to create
            var number = document.getElementById("member").value;
            // Container <div> where dynamic content will be placed
            var container = document.getElementById("container");
            // Clear previous contents of the container
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }
            for (i=0;i<number;i++){
                // Append a node with a random text
                container.appendChild(document.createTextNode("Member " + (i+1)));
                // Create an <input> element, set its type and name attributes
                var input = document.createElement("input");
                input.type = "text";
                input.name = "member" + i;
                container.appendChild(input);
                // Append a line break 
                container.appendChild(document.createElement("br"));
            }
        }
    </script>
</head>
<body>
    <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
    <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
    <div id="container"/>
</body>
</html>

Xem một mẫu hoạt động trong JSFiddle này .

Question 3

Hãy thử mã JQuery này để bao gồm động biểu mẫu, trường và hành vi xóa / xóa:

$(document).ready(function() {
    var max_fields = 10;
    var wrapper = $(".container1");
    var add_button = $(".add_form_field");

    var x = 1;
    $(add_button).click(function(e) {
        e.preventDefault();
        if (x < max_fields) {
            x++;
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box
        } else {
            alert('You Reached the limits')
        }
    });

    $(wrapper).on("click", ".delete", function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1">
    <button class="add_form_field">Add New Field &nbsp; 
      <span style="font-size:16px; font-weight:bold;">+ </span>
    </button>
    <div><input type="text" name="mytext[]"></div>
</div>

Mở rộng đoạn mã

Tham khảo Demo Tại đây