How to get values of multiple dropdowns and file uploads appended with Jquery Multifield plugin

I am trying to get the values of multiple select boxes and file inputs using jquery. I am using Jquery Multifield plugin for appending same fields multiple times.So far i am unable to get all the values as i am using jquery and ajax to post these inputs.

$('.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

Check the below snippet with jquery-multifield plugin enabled. Here you can add files and on submit, the filled data can be seen in console. Please use browser console for clear view.

Here form data is assigned to _form variable, you need to send this variable to server.

$('.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>

Advertisement

Answer