如何在Django中为2个不同的提交按钮使用相同的引导模态?

时间:2018-07-28 15:26:40

标签: django bootstrap-4 bootstrap-modal

我有2个基本上提交表单的按钮,但是我首先需要向用户确认并为此使用了模式

<source>

以及我需要与它们同时使用但不想重复代码的模式

            <form action="{% url 'reset_pl' %}" method="post" style="display: inline;">
            {% csrf_token %}
            <button type="submit" class="btn btn-primary btn-xs">
            <span class="glyphicon glyphicon-remove"></span>Clear Players
            </button>
            </form>

            <form action="{% url 'reset_all' %}" method="post" style="display: inline;">
            {% csrf_token %}
            <button type="submit" class="btn btn-primary btn-xs">
            <span class="glyphicon glyphicon-remove"></span>Clear Teams
            </button>
            </form>

我不确定如何动态地改变表单的动作或让模式知道单击按钮时在何处实际提交表单。

1 个答案:

答案 0 :(得分:1)

我相信您不需要表格即可进行重置。您可以只使用具有自定义类的按钮(例如reset-pl和reset-all)来通过其 data-target 属性触发点击时的模式打开,并同时传递按钮的 data-id 属性中对应于模式的url。

<button class="reset-pl" data-id="{% url 'reset_pl' %}" type="button" data-toggle="modal" data-target="#clear">
    <span class="glyphicon glyphicon-remove"></span>Clear Players
</button>

<button class="reset-all" data-id="{% url 'reset_all' %}" type="button" data-toggle="modal" data-target="#clear">
    <span class="glyphicon glyphicon-remove"></span>Clear Teams
</button>

在您的锚点上添加适当的 id (例如,重置锚点),并保留按钮,用于模式关闭。

<a id="reset-anchor" class="btn btn-primary btn-xs">Yes</a>
<button class="btn btn-primary btn-xs" data-dismiss="modal">No</button>

在javascript中,只需将带有重置锚ID的的href属性设置为单击按钮的数据ID 中的相应网址即可。

<script type="text/javascript">
    $(".reset-pl").click(function () {
        $("#reset-anchor").attr("href", $(this).data("id"));
    });

    $(".reset-all").click(function () {
        $("#reset-anchor").attr("href", $(this).data("id"));
    });
</script>

总而言之,当单击按钮时,将通过data-target打开模式模式,同时通过javascript将data-id中的url设置为按钮的href。 按钮当然比单击时触发适当的网址。