Django 使用引导将按钮连接到modal

我需要一些帮助连接一个按钮，弹出一个模式提交表单

这是模态之前的html（工作正常，单击按钮后呈现另一个页面）

让我们开始吧
1.CSV文件
2.应该只有两列
{%csrf_令牌%}


提交

我已经添加了模态，但是我现在有几个问题

<div class="container my-container">
    <div class="row my-row">
    <h3>
        Let's get started
    </h3>
    </div>
    <div class="modal fade" id="demo123">
        <div class="modal-dialog">
            <div class="modal-content">
                <button type="button" class="close" data-dismiss="modal">
                    <span>
                        &times;
                    </span>
                </button>
                <div class="modal-header">
                    <h2 class="modal-title">
                        Confirm upload
                    </h2>
                </div>
                <div class="modal-body">
                    <p>this is the file name</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        Confirm
                    </button>
                </div>
            </div>
        </div>
    </div>
        <div class="row my-row">
            <h4>1. CSV file</h4>
        </div>
        <div class="row my-row">
            <h4>2. There should be only two columns titled</h4>
        </div>
        <div class="row my-row">
            <form method="post" enctype="multipart/form-data">
                {%csrf_token%}
                <input type="file" name="document"><br>
                <button class="btn btn-primary" data-toggle="modal" data-target="#demo123">
                 Submit
                </button>
            </form>
        </div>
</div>

让我们开始吧
&时代；
确认上传
这是文件名

证实
1.CSV文件
2.应该只有两列标题为
{%csrf_令牌%}


提交

我遇到的第一个问题是“提交”按钮会自动进行上传（呈现到另一个页面）。只有当“确认”按钮是实际提交表单的按钮时（如果“x”则弹出窗口关闭），我才能这样做。另外，如何在弹出窗口中显示文件名

---

我将django与bootstrap 4一起使用，您必须使用Javascript，因为bootstrap使用jQuery，所以您必须使用Javascript和jQuery创建该逻辑

处理对话框“确认”按钮，然后单击并仅触发表单提交事件

处理模式显示事件

show.bs.modal

，如果选择了文件，则设置对话框文件名元素并启用确认按钮；如果未选择任何文件，请使用相同的filename元素向用户发送有关该文件的消息，并禁用确认按钮，以便用户无法单击该文件

您可以运行代码片段并测试整个功能。在提交表单时，我们取消事件，并在控制台中打印一条消息以供演示

请阅读内联评论

jQuery（函数（$）{
//处理表格提交。
//除非您想要一些自定义行为，否则这是不必要的。
//在这里，我们只需取消表单提交，并显示一条消息以供演示
$（'#uploadForm'）。在（'submit'，函数（e）上{
log（'表单正在提交；阻止事件进行演示'）；
e、 预防默认值（）；
});
//“处理”对话框“确认”按钮单击。
$（'confirmUpload'）。在（'click'，函数（e）上{
//提交表单并在单击“确认”时隐藏对话框
$（'demoModal123'）.modal（'hide'）；
$（'#uploadForm'）。提交（）；
});
//当对话框即将显示时，检查用户是否选择了文件。
//如果有，则更新对话框文件名元素并启用确认按钮，
//否则向用户发送消息，说明没有文件，并禁用确认按钮
$（'#demoModal123'）。on（'show.bs.modal'，function（）{
让files=document.getElementById（'documentFile'）.files；
让fileSelected=files&&files[0]；
如果（已选择）{
$（'#demoModal123.filename'）.text（fileSelected.name）；
$（'confirmUpload'）.prop（'disabled'，false）；
}否则{
$（'#demoModal123.filename'）.text（'未选择任何文件'）；
$（'confirmUpload'）.prop（'disabled'，true）；
}
});
//更新文件选择上的文件输入组控件标签
$（'#documentFile'）。在（'change'，function（）上{
$（'#documentFileName'）.text（this.files[0].name）；
});
});

让我们开始吧
1.CSV文件
2.应该只有两列
上传
选择文件
提交
确认上传
&时代；
这是文件名
取消
证实
要将确认按钮作为唯一提交操作，您必须在确认按钮中添加
type=“submit”
，在提交按钮中添加
type=“button”
。像这样：

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

<button type="submit" class="btn btn-secondary" data-dismiss="modal">
  Confirm
</button>


提交
证实
这是我第一次使用JQuery，我是将函数放在HTML之上还是放在HTML之上？使用JQuery初始化
JQuery（函数（$）{…}）
将保证它被加载，因此您可以将此代码放在最后的页面模板中。如果它是一个完整的HTML模板，那么您可以将它放在
关闭标记之前，否则就放在模板文件的末尾。
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo123">
  Submit
</button>

<button type="submit" class="btn btn-secondary" data-dismiss="modal">
  Confirm
</button>