การเพิ่มองค์ประกอบอินพุตแบบไดนามิกในรูปแบบ

Question 1

ฉันได้อ่านบล็อกและโพสต์มากมายเกี่ยวกับการเพิ่ม fieldsets แบบไดนามิก แต่ทั้งหมดนี้ให้คำตอบที่ซับซ้อนมาก สิ่งที่ฉันต้องการไม่ซับซ้อนขนาดนั้น

รหัส HTML ของฉัน:

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

ดังนั้นผู้ใช้จะป้อนค่าจำนวนเต็ม (ฉันกำลังตรวจสอบความถูกต้องโดยใช้จาวาสคริปต์) ในinputฟิลด์ และเมื่อคลิกFill Detailsลิงก์จำนวนช่องป้อนข้อมูลที่เกี่ยวข้องจะปรากฏขึ้นเพื่อให้เขาป้อน ฉันต้องการบรรลุสิ่งนี้โดยใช้จาวาสคริปต์

ฉันไม่ใช่มืออาชีพในจาวาสคริปต์ ฉันกำลังคิดว่าฉันจะดึงจำนวนเต็มที่ผู้ใช้กรอกในinputฟิลด์ผ่านลิงค์และแสดงจำนวนช่องป้อนข้อมูลที่สอดคล้องกันได้อย่างไร

Question 2

คุณสามารถใช้onclickตัวจัดการเหตุการณ์เพื่อรับค่าอินพุตสำหรับฟิลด์ข้อความ ตรวจสอบให้แน่ใจว่าคุณได้ให้idแอตทริบิวต์ที่ไม่ซ้ำกันในฟิลด์เพื่อให้คุณสามารถอ้างถึงได้อย่างปลอดภัยdocument.getElementById() :

หากคุณต้องการเพิ่มองค์ประกอบแบบไดนามิกคุณควรมีคอนเทนเนอร์ที่จะวางองค์ประกอบเหล่านั้น ตัวอย่างเช่นก<div id="container">. สร้างองค์ประกอบใหม่ด้วยวิธีการdocument.createElement()และใช้appendChild()เพื่อต่อท้ายแต่ละองค์ประกอบเข้ากับคอนเทนเนอร์ คุณอาจสนใจที่จะส่งออกnameแอตทริบิวต์ที่มีความหมาย(เช่นname="member"+iสำหรับแต่ละรายการที่สร้างขึ้นแบบไดนามิก<input>หากต้องการส่งในแบบ

สังเกตเห็นว่าคุณยังสามารถสร้างองค์ประกอบที่มี<br/> document.createElement('br')หากคุณต้องการแสดงข้อความเพียงบางส่วนคุณสามารถใช้document.createTextNode()แทนได้

นอกจากนี้หากคุณต้องการล้างคอนเทนเนอร์ทุกครั้งที่มีการเติมข้อมูลคุณสามารถใช้hasChildNodes()และremoveChild()ร่วมกันได้

<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>

ขยายข้อมูลโค้ด

ดูตัวอย่างการทำงานในJSFiddleนี้

Question 3

ลองใช้โค้ด JQuery นี้เพื่อรวมแบบฟอร์มฟิลด์และลบ / ลบพฤติกรรมแบบไดนามิก:

$(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>

ขยายข้อมูลโค้ด

ดูการสาธิตที่นี่