Как получить значения нескольких выпадающих списков и загрузок файлов с добавлением Jquery Multifield плагин

Question

Я пытаюсь получить значения нескольких полей выбора и входных файлов, используя jquery. Я использую Jquery плагин Multifield для добавления одних и тех же полей несколько раз. Пока я не могу получить все значения, поскольку использую jquery и ajax для публикации этих входных данных.

---

$('.myFlag').on('change', function () {

      var flagID = $(".myFlag option:selected").val();
alert(flagID);
});
$('#submit').on('click', function () {
var flag_attach = $('.InputFile')[0].files[0].name;
alert(flag_attach);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="example-6">
            <div class="row group" >
                <div class="col-md-1"></div>
                <div class="col-md-3">

                    <div class="form-group">
                        <label>Choose Flag Type</label>
                        <select class="form-control myFlag" name="flag_name[]">
                            <option value="">Select Flag</option>
                                <option value="1">A</option>
                                 <option value="2">B</option>
                                  <option value="3">C</option>
                        </select>
                        <select class="form-control myFlag" name="flag_name[]">
                            <option value="">Select Flag</option>
                                <option value="1">A</option>
                                 <option value="2">B</option>
                                  <option value="3">C</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-3" >
                    <div class="form-group">
                        <label for="exampleInputFile">Upload Flag</label>
                        <div class="input-group">

                            <input type="file" class="custom-file-input InputFile" name="flag_attach[]" id="InputFile" accept="application/pdf">
                            <label class="custom-file-label" for="exampleInputFile">Choose file</label>
<label for="exampleInputFile">Upload Flag</label>
                        <div class="input-group">

                            <input type="file" class="custom-file-input InputFile" name="flag_attach[]"  accept="application/pdf">
                            <label class="custom-file-label" for="exampleInputFile">Choose file</label>

                        </div>
                    </div>
                </div>
               
            </div>
                
                <!-- <div class="col-md-2"></div> --> 
            <!-- </div> -->
           </div>
           <button type="button" id="submit">submit </button>

Answer 1

Проверьте приведенный ниже фрагмент с включенным плагином jquery -multifield. Здесь вы можете добавлять файлы и при отправке заполненные данные можно увидеть в консоли. Пожалуйста, используйте консоль браузера для четкого просмотра.

Здесь данные формы назначены переменной _form, вам необходимо отправить эту переменную на сервер.

$('.myFlag').on('change', function() {
  var flagID = $(this).val();
});
$('#myForm').on('submit', function() {
  var _form = new FormData(this);// get the form object values. Send this variable to ajax call.
  for (var value of _form.values()) {
    console.log(value); // shows each form values. here you can see the file name etc...
  }
});
$('#example-6').multifield({
  section: '.section',
  btnAdd: '.btnAdd',
  btnRemove: '.btnRemove'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://maxkostinevich.github.io/jquery-multifield/jquery.multifield.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form id="myForm" enctype="multipart/form-data">
    <div id="example-6">
      <div class="row group">
        <div class="col-md-1">
          <button type="button" class="btn btn-primary btnAdd">Add</button>
        </div>
        <div class="section">
          <div class="col-md-3">
            <div class="form-group">
              <label>Choose Flag Type</label>
              <select class="form-control myFlag" name="flag_name[]">
                <option value="">Select Flag</option>
                <option value="1">A</option>
                <option value="2">B</option>
                <option value="3">C</option>
              </select>
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
              <label for="exampleInputFile">Upload Flag</label>
              <div class="input-group">
                <input type="file" class="custom-file-input InputFile" name="flag_attach[]" accept="application/pdf">
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <button class="btn btn-danger btnRemove" type="button">Remove</button>
          </div>
        </div>
      </div>
    </div>
    <button type="submit" id="submit" class="btn btn-primary">submit </button>
  </form>
</div>