Bootstrap 模态和 jQuery：表单输入为空

Question

我在使用 Bootstrap 的应用程序中使用模态 window 内的表单。表格如下所示：

<div class="modal fade" id="my_modal">
    <div class="modal-dialog modal-lg">
        <div class="form-group">
            <form class="form-horizontal" id="my_form">
                <div class="form-group">
                    <div class="col-sm-10">
                        <input type="file" name="file" id="my_file">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-10">
                        <input type="text" name="my_text" id="my_text" class="form-control select-resource-form-control">
                    </div>
                </div>
                <button id="my_button" type="button" class="btn btn-primary btn-send">Send</button>
            </form>
        </div>
    </div>
</div>

当我尝试发送此表单的表单数据时，接收部分的文件和文本字段均为空，控制台中的以下命令也确认表单为空：

when I use modal fade

如果我替换根标签中的 modal fade 属性，例如，用 modal-body，一切正常，但我需要一个模态 window 用于我的目的，它出现，发送响应并关闭。 when I use modal-body

ideas/workarounds 对此

表示感谢

更新： ajax 查询为：

let form = $("#my_form").get(0);
$.ajax({
        url: "some/url/Im/sending/data/to",
        method: "POST",
        data: new FormData(form),
        cache: false,
        contentType: false,
        processData: false,
    }
}

Answer 1

首先，您的模态框结构似乎缺少一些项目。它应该看起来像这样：

<div class="modal fade" ...
   <div class="modal-dialog" ...
      <div class="modal-content">
          <div class="modal-body">
              your form

此外，我认为 form-group 应该只在 form 内。

Answer 2

问题已解决。当模态 window 被实例化时，页面还用 class in 实例化了第二个模态。所以我将 window 的选择器更改为以下内容，一切正常 "#my_modal.in #my_form"

Bootstrap 模态和 jQuery：表单输入为空

Bootstrap modal and jQuery: form inputs are empty

html

javascript

jquery

multipartform-data

bootstrap-modal