如何获取附加了 Jquery Multifield 插件的多个下拉列表和文件上传的值

Posted 2023-05-09

【中文标题】如何获取附加了 Jquery Multifield 插件的多个下拉列表和文件上传的值

【英文标题】：How to get values of multiple dropdowns and file uploads appended with Jquery Multifield plugin

【发布时间】：2020-06-11 04:07:42

【问题描述】：

我正在尝试使用 jquery 获取多个选择框和文件输入的值。 我使用Jquery Multifield plugin 多次附加相同的字段。到目前为止，我无法获取所有值，因为我使用 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>

【问题讨论】：

这里var flagID = $("#flag_id option:selected").val(); 你使用id来获取值，所以只取id的第一个实例，要么使用class，要么创建sn-p并解释你需要实现的逻辑

@AkhilAravind 我已经更新了问题，请看一下。不幸的是，我找不到任何用于将 Jquery Multifield 插件添加到 sn-p 中的 CDN 链接。

【参考方案1】：

在启用 jquery-multifield 插件的情况下检查下面的 sn-p。在这里您可以添加文件并在提交时，可以在控制台中看到填充的数据。请使用浏览器控制台以获得清晰的视图。

这里表单数据赋值给_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>

【讨论】：

感谢您的努力。它完全按照我想要的方式在您的 sn-p 中工作，但我没有在原始代码中获取所有文件输入。它只显示第一个文件。请看这个codepen.io/haro0n/pen/gOpWbmW

@HaroonKhan 为什么不按照答案中的确切标记进行操作，而且您的 javascript 也很混乱，一切都清楚地写在 sn-p 中。跟着它。 :)

我无法使用您提供的确切代码，因为由于某种原因，我不使用 formdata.append() 就无法获得 flag_attachment 输入；

@HaroonKhan 我可以知道你在用它做什么吗？？

整个场景明显不同，因为我的表单中有许多其他输入要处理。请看看codepen，任何进一步的帮助将不胜感激:)