इनपुट फॉर्म तत्वों की गतिशील पीढ़ी

उपयोगकर्ता इनपुट के आधार पर वेब पेज सामग्री को गतिशील रूप से समायोजित करने से उपयोगकर्ता अनुभव बढ़ता है। इस संदर्भ में, इनपुट फॉर्म तत्वों की एक विशिष्ट संख्या बनाना एक ऐसा कार्य है जिसे जावास्क्रिप्ट के साथ हासिल किया जा सकता है।

टेक्स्ट फ़ील्ड से उपयोगकर्ता के इनपुट को पुनः प्राप्त करने के लिए, एक ऑनक्लिक इवेंट हैंडलर आवश्यक है। यह हैंडलर फ़ील्ड से मान एकत्र करता है, जिसे एक अद्वितीय आईडी विशेषता के माध्यम से पहचाना जाता है।

अगले चरण में गतिशील रूप से उत्पन्न तत्वों को रखने के लिए एक कंटेनर तत्व बनाना शामिल है। जावास्क्रिप्ट के document.createElement() का उपयोग करके, नए तत्व बनाए जा सकते हैं और appendChild() का उपयोग करके कंटेनर में जोड़ा जा सकता है। इन तत्वों को एक फॉर्म में सबमिट करने के लिए नाम और मूल्य जैसी सार्थक विशेषताओं को सेट करना महत्वपूर्ण है।

अतिरिक्त स्पष्टता के लिए, document.createElement('br') का उपयोग करके लाइन ब्रेक डाले जा सकते हैं। वैकल्पिक रूप से, document.createTextNode() केवल टेक्स्ट प्रदर्शित करने के लिए उपयुक्त है।

कंटेनर में अनावश्यक तत्वों को रोकने के लिए, hasChildNodes() का उपयोग करके मौजूदा चाइल्ड नोड्स की जांच की जा सकती है, इसके बाद उन्हें रिमूव चाइल्ड() से हटाया जा सकता है। .

एक उदाहरण कोड स्निपेट इन तकनीकों को प्रदर्शित करता है:

function addFields(){
    // Get the number of fields from the user input
    var number = document.getElementById("member").value;
    // Get the container where the inputs will be added
    var container = document.getElementById("container");
    // Remove any existing child nodes
    while (container.hasChildNodes()) {
        container.removeChild(container.lastChild);
    }
    // Add the specified number of input fields
    for (i=0;i<number;i  ){
        // Create a new text node
        container.appendChild(document.createTextNode("Member "   (i 1)));
        // Create a new input field
        var input = document.createElement("input");
        input.type = "text";
        input.name = "member"   i;
        container.appendChild(input);
        // Add a line break
        container.appendChild(document.createElement("br"));
    }
}

इन सिद्धांतों को एकीकृत करके, आप गतिशील रूप से इनपुट फॉर्म तत्वों की वांछित संख्या बना सकते हैं, उपयोगकर्ता डेटा प्रविष्टि की सुविधा प्रदान कर सकते हैं और अपने वेब एप्लिकेशन की समग्र कार्यक्षमता को बढ़ा सकते हैं।