इनपुट तत्वों को गतिशील रूप से जोड़ना

Question 1

मैंने गतिशील रूप से फ़ील्ड जोड़ने पर कई ब्लॉग और पोस्ट पढ़े हैं, लेकिन वे सभी बहुत जटिल उत्तर देते हैं। जो मुझे चाहिए वह जटिल नहीं है।

मेरा 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>s के लिए आउटपुट के लिए इच्छुक हो सकते हैं।

ध्यान दें कि आप <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>

स्निपेट का विस्तार करें

यहां डेमो देखें