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

Question

我正在尝试获取一个位于“模态主体”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>