التوليد الديناميكي لعناصر نموذج الإدخال

يؤدي ضبط محتوى صفحة الويب ديناميكيًا بناءً على إدخال المستخدم إلى تحسين تجربة المستخدم. في هذا السياق، يعد إنشاء عدد محدد من عناصر نموذج الإدخال مهمة يمكن تحقيقها باستخدام JavaScript.

لاسترداد مدخلات المستخدم من حقل نصي، من الضروري وجود معالج حدث عند النقر. يقوم هذا المعالج بجمع القيمة من الحقل، والتي يتم تحديدها من خلال سمة معرف فريدة.

تتضمن الخطوة التالية إنشاء عنصر حاوية للاحتفاظ بالعناصر التي تم إنشاؤها ديناميكيًا. من خلال استخدام document.createElement()‎ الخاص بجافا سكريبت، يمكن إنشاء عناصر جديدة وإلحاقها بالحاوية باستخدام appendChild(). يعد تعيين سمات ذات معنى، مثل الاسم والقيمة، أمرًا ضروريًا لإرسال هذه العناصر في نموذج.

لمزيد من الوضوح، يمكن إدراج فواصل الأسطر باستخدام document.createElement('br'). بدلاً من ذلك، document.createTextNode() مناسب لعرض النص ببساطة.

لمنع العناصر الزائدة في الحاوية، يمكن تنفيذ التحقق من العقد الفرعية الموجودة باستخدام hasChildNodes()، متبوعة بإزالتها باستخدام RemoveChild() .

مثال لمقتطف التعليمات البرمجية يوضح هذه التقنيات:

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"));
    }
}

من خلال دمج هذه المبادئ، يمكنك إنشاء العدد المطلوب من عناصر نموذج الإدخال ديناميكيًا، مما يسهل إدخال بيانات المستخدم ويعزز الوظيفة العامة لتطبيق الويب الخاص بك.