Блог

У меня возникают проблемы с размещением значений в динамически создаваемых полях ввода. У меня есть страница с вводом и предоставлением пользователю возможности добавлять дополнительный контент, то есть кнопку , для создания дополнительных полей ввода. Любые дополнительные поля, которые создаются, не отправляются внутри моего post-запроса (jQuery). Публикуется только одно исходное поле.

Вот мой div:

 <div class="col-md-9">
  <div class="input-group input-group-sm">
    <div class="input-group-prepend mb-3">
      <span class="input-group-text">VLAN ID amp; NAME</span>
    </div>
    <input type="number" class="form-control" name="vlan_id" id="vlan_id" placeholder="e.g: 123" requiredmin="1" max="4094" />
    <input type="text" class="form-control" name="vlan_name" id="vlan_name" placeholder="e.g: CXX1_LAN01" required />
      <a href="#" role="button" class="btn btn-circle add_new_vlan_field"><i class="fas fa-plus-circle"></i></a>
    </div>
    <div class="vlan_info_block"></div>
</div>
 

Создание динамического ввода:

 $(document).ready(function () {
    var max_fields = 5;
    var wrapper = $(".vlan_info_block");
    var add_button = $(".add_new_vlan_field");
    var x = 1;
    $(add_button).click(function (e) {
      e.preventDefault();
      if (x < max_fields) {
        x  ;
        $(wrapper).append(
          '<div class="input-group input-group-sm"><div class="input-group-prepend mb-3"><span class="input-group-text">VLAN ID amp; NAME</span></div><input type="text" class="form-control" name="vlan_id" id="vlan_id"><input type="text" class="form-control" name="vlan_name" id="vlan_name"><a href="#" class="btn btn-circle delete" role="button"><i class="fas fa-times-circle"></i></a></div>'
        );
      } else {
        alert("You Reached the limits of max allowed VLAN(s) - 5");
      }
    });
    $(wrapper).on("click", ".delete", function (e) {
      e.preventDefault();
      $(this).parent("div").remove();
      x--;
    });
  });
 

Это мой пост.:

 $("#add_job").on("click", function () {
    var pod = document.getElementById("pod").value;
    var vlan_id = document.getElementById("vlan_id").value;
    var vlan_name = document.getElementById("vlan_name").value;
    $.ajax({
        url: "/testing_tasks",
        data: {
          pod,
          vlan_id,
          vlan_name
        },
        method: "POST",
      })
      .done((res) => {
        getStatus(res.data.task_id);
      })
      .fail((err) => {
        console.log(err);
      });
  });
 

Спасибо.