如何在不使用 id 作为选择器的情况下获取表单以构建 FormData() 对象

Question

我正在尝试获取 "modal-body" div 中的表单，并在用户单击模式按钮时创建 FormData() 对象。由于特殊原因我无法通过id或class获取此表格，所以我这样做：

$('.save-form').click(function() {
    var myform = $(this).parent().parent().find('.modal-body').html();
    var fd = new FormData(myform);
}

通过使用 .html() 或 .contents() 我得到错误：“构造失败 'FormData'：参数 1 不是类型 'HTMLFormElement'".

如果我使用 id 作为选择器，它工作正常，但正如我所说，我无法通过它的 id 获取它。显然 FormData() 不喜欢我传递给它的内容。所以我的问题是：我是否需要通过其他方式获取表格，还是需要先进行转换或其他操作？我将不胜感激任何帮助。

这是我的 html:

<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">My Title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-body">
                    <form>
                        <input type="checkbox" name="item-1">
                        <label>Item 1</label>
                        <input type="checkbox" name="item-2">
                        <label>Item 2</label>
                        <input type="checkbox" name="item-3">
                        <label>Item 3</label>
                        <input type="checkbox" name="item-4">
                        <label>Item 4</label>
                    </form>            
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary save-form">Save</button>
            </div>
        </div>
    </div>
</div>

Answer 1

在引用 <form> 标签时，您需要使用纯 JavaScript 或取消引用 jQuery 对象。 FormData() 对象无法识别 jQuery 对象。以下任何一项都应该有效：

取消引用 jQuery 对象

$('form')[0];
$('form').get(0);

普通 JavaScript

document.forms[0];
document.querySelector('form');
document.getElementsByTagName('form')[0];

以上所有都将获得网页上的第一个 <form> 标签，没有任何属性。

演示

$('.save-form').click(function() {
  const form = $('form')[0];
  const fd = new FormData(form);
  console.log(fd);
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#xModal">
  Modal
</button>

<div id="xModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">My Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
      </div>
      <div class="modal-body">
        <div class="modal-body">
          <form>
            <input type="checkbox" name="item-1">
            <label>Item 1</label>
            <input type="checkbox" name="item-2">
            <label>Item 2</label>
            <input type="checkbox" name="item-3">
            <label>Item 3</label>
            <input type="checkbox" name="item-4">
            <label>Item 4</label>
          </form>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary save-form">Save</button>
      </div>
    </div>
  </div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

如何在不使用 id 作为选择器的情况下获取表单以构建 FormData() 对象

How to get a form to build a FormData() object without using an id as a selector

javascript

jquery

form-data

演示