时间戳

首页 > 解决方案 > Bootstrap modal 和 jQuery：表单输入为空

javascript - Bootstrap modal 和 jQuery：表单输入为空

问题描述

我在使用 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>

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

当我使用模态淡入淡出

如果我将modal fade根标记中的属性替换为modal-body，则一切正常，但我需要一个用于我的目的的模式窗口，它会显示、发送响应并关闭。 当我使用模态体时

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

更新：查询的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,
    }
}

标签： javascriptjqueryhtmlbootstrap-modalmultipartform-data

解决方案

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

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

另外，我相信form-group's 只应该在forms 内部。

推荐阅读