كيفية عمل النماذج الديناميكية في لغة جافاسكريبت

نستخدم حقول النموذج الديناميكي في العديد من السيناريوهات ، مثل إنشاء قائمة مهام أو أي نموذج آخر قد يحتوي على حقل واحد أو أكثر من الحقول المطلوبة.

• بناء هيكل HTML ضروري ، نبدأ من بنية HTML لحقول النموذج الديناميكي الخاصة بنا.

  <h1>الحقول الديناميكية</h1>
    <div class="wrapper">
      <div id="survey_options">
        <input type="text" name="survey_options[]" class="survey_options" size="50" placeholder="Name">
        <input type="text" name="survey_options[]" class="survey_options" size="50" placeholder="Email">
        <input type="text" name="survey_options[]" class="survey_options" size="50" placeholder="Another Field">
      </div>
      <div class="controls">
        <a href="#" id="add_more_fields"><i class="fa fa-plus"></i>إضافة</a>
        <a href="#" id="remove_fields"><i class="fa fa-plus"></i>حذف</a>
      </div>
    </div>

   

• لقد قمت بتضمين ثلاثة حقول فقط ، اثنان منهم (الاسم والبريد الإلكتروني) ثابتان وأنا أجعل الحقل الأخير حقل آخر ديناميكيًا ، حيث سنقوم بتنفيذ الإجراءات. يبدو قبيح جدا. أليس كذلك؟ لنقم ببعض تصميمات CSS لجعلها جذابة.

  @import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;300;400;700&display=swap');
  
  body {
    background-color: #f0f5ff;
    font-family: 'Jost',sans-serif;
    color: #fff;
  }
  
  .wrapper {
    width: 400px;
    margin: 40px auto;
    padding: 10px;
    border-radius: 5px;
    background: white;
    box-shadow: 0px 10px 40px 0px rgba(47,47,47,.1);
  }
  
  input[type="text"]{
    padding: 10px;
    margin: 10px auto;
    display: block;
    border-radius: 5px;
    border: 1px solid lightgrey;
    background: none;
    width: 274px;
    color: black;
  }
  
  input[type="text"]:focus {
    outline: none;
  }
  
  .controls {
    width: 294px;
    margin: 15px auto;
  }
  
  #remove_fields {
    float: right;
  }
  .controls a i.fa-minus {
    margin-right: 5px;
  }
  
  a {
    color: black;
    text-decoration: none;
  }
  
  h1 {
    text-align: center;
    font-size: 48px;
    color: #232c3d;
  }

   

• ما الذي يجعل النموذج تفاعليًا؟ بالتأكيد ، جافا سكريبت.

  var survey_options = document.getElementById('survey_options');
  var add_more_fields = document.getElementById('add_more_fields');
  var remove_fields = document.getElementById('remove_fields');
  
  add_more_fields.onclick = function(){
    var newField = document.createElement('input');
    newField.setAttribute('type','text');
    newField.setAttribute('name','survey_options[]');
    newField.setAttribute('class','survey_options');
    newField.setAttribute('siz',50);
    newField.setAttribute('placeholder','Another Field');
    survey_options.appendChild(newField);
  }
  
  remove_fields.onclick = function(){
    var input_tags = survey_options.getElementsByTagName('input');
    if(input_tags.length > 2) {
      survey_options.removeChild(input_tags[(input_tags.length) - 1]);
    }
  }
  
    document.getElementById('print-values-btn').onclick = function() {
        let allTextBoxes = document.getElementsByName('survey_options[]');  
        for(let i of allTextBoxes){
            console.log(i.value) // هنا ستتمكن من رؤية جميع القيم في  console
        }
    }

  شرح الكود 

  في الأسطر الثلاثة الأولى ، لدي الحقل الذي سيكون ديناميكيًا وزر عناصر التحكم (إضافة وإزالة) لأداء أحداث onclick.

  أقوم الآن بإنشاء عنصر إدخال جديد كلما تم تنفيذ حدث النقر على add_more_fields. في الواقع ، يقوم بإنشاء عناصر إدخال وإضافة سمات إليها مثل النوع والاسم والفئة وما إلى ذلك.

  نحتاج أيضًا إلى الإزالة أيضًا.

  نحتاج أولاً إلى التحقق من أن طول الإدخال أكبر من 2 ، ثم سنزيله بخلاف ذلك.

  إذا كان لدينا أكثر من مجالين. ثم ببساطة استخدم وظيفة JS removeChild واجتياز رقم الفهرس الخاص بـ Survey_options.

شكرا جزيلا استاذ احمد والله يعطيك العافية

اذا كان المطلوب انه زر اضافة بعد ما يضيف حق الإدخال انه ينحذف ويرجع ينضاف زر اضافة من جديد وهاد الزر بيرجع عند الضغط عليه بيضيف حقل الإدخال وبينحذف الزر وبيرجع بينضاف وهكذا... كيف بقدر برمج ه الشي بالجافا سكربت

بتاريخ 13 ساعات قال منار النقري:

اذا كان المطلوب انه زر اضافة بعد ما يضيف حق الإدخال انه ينحذف ويرجع ينضاف زر اضافة من جديد وهاد الزر بيرجع عند الضغط عليه بيضيف حقل الإدخال وبينحذف الزر وبيرجع بينضاف وهكذا... كيف بقدر برمج ه الشي بالجافا سكربت

يمكنك تجربة الكود أعلاه فهو يعمل بشكل جيد . كما يمكنك تعديله حسب متطلبات مشروعك .