Bootstrap modal和JQuery：表单输入为空

Question

我正在使用Bootstrap的应用程序的模态窗口内使用表单。表单看起来像这样：

<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，则一切正常，但是我需要一个模态窗口来显示，发送响应并关闭。when I use modal-body

将不胜感激关于此的任何想法/解决方法

Answer 1

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

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

此外，我相信form-group仅应位于form内部。