Django-crispy-forms 将提交按钮放在不同的位置

Question

我正在使用 Django-crispy-forms，我希望能够将“提交”按钮放置在不同于紧靠表单底部的位置。

这是我的表格：

from django import forms
from django.core.urlresolvers import reverse
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit, Layout, Button, Fieldset, ButtonHolder, Submit
from gpsim.models import GPSimConfig

class AddNewGPSimConfigForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(AddNewGPSimConfigForm, self).__init__(*args, **kwargs)
        self.initial['name'] = ''
        self.helper = FormHelper()
        self.helper.form_id = 'add-new-gpsim-config'
        self.helper.form_method = 'post'
        self.helper.form_action = reverse('gpsim:add_gpsim_config')
        self.helper.layout = Layout(
            Fieldset(
                '',
                'name',
                'other fields...',
            ),
            ButtonHolder(
                Submit('submit', 'Create', css_class='btn-default')
            )
        )

    class Meta:
        model = GPSimConfig

该模板是一个 Bootstrap 模态弹出窗口。模态最初显示一个表单，其中包含可供选择的 GPSimConfig 项目列表。当用户选择一个项目时，将通过 Jquery.

使用此表单加载跨度

在模态的底部，有一个取消按钮，我想把提交按钮放在取消按钮旁边的底部，但是当生成 crispy-form 时，它把提交按钮在最后一个字段之后关闭表单。

这是加载到模式 'modal-content' div 的模板。

{% extends "gpsim/tmpl_gpsim_modal_base.html" %}
{% load staticfiles %}

{% block modal-title %}Add GPSim Config{% endblock %}
{% block modal-body-left %}
Copy GPSim config from<br><br>
{% if my_gpsim_configs %}
My GPSim Configs<br>
<select id="my_gpsim_config_id" name="gpsim_config" class="form-control" onChange="load_span_from_select_change('my_gpsim_config_id','/gpsim/gpsim-config/add/?copy-from-id=', 'add_gpsim_config_span');">
    <option>select</option>
    {% for gpsim_config in my_gpsim_configs %}
    <option value="{{gpsim_config.id}}">{{gpsim_config.name}}</option>
    {% endfor %}
{% endif %}

{% endblock %}
{% block modal-body-right %}
<span id="add_gpsim_config_span"></span>
{% endblock %}
{% block modal-submit-button %}
<div id="submit-div">
</div>
{% endblock %}

跨度 "add_gpsim_config_span" 是通过 Jquery 加载表单的位置，提交按钮与表单结束标记一起放置在那里。我想将提交放在 "submit-div" div 中。

有办法吗？

Answer 1

首先，从 FormHelper 中删除 ButtonHolder(Submit()) 按钮。

然后只需将按钮放入您的 submit-div，例如：

<div id="submit-div">
    <button class="btn btn-default">Submit</button>
</div>

并在点击按钮时使用 jQuery 提交表单：

$('#submit-div btn').click(function() {
    $("#add-new-gpsim-config").submit();
});

Answer 2

我有这个完全相同的问题。在没有 jQuery 的情况下执行此操作的一种方法是在 __init__ 中包含 self.helper.form_tag = False。然后，在 'modal-content' 中编写您的表单标签，使其包含模态页眉、正文和页脚。看起来在你的情况下你必须为此使用嵌套块，但这是我的工作解决方案：

<div class="container">
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
      <form id="modal-form" action="{% url 'emailme' %}" class="form-horizontal emailme-form" method="POST">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4><span class="glyphicon glyphicon-envelope"></span> Email Me</h4>
        </div>
        <div class="modal-body">
            <div class="modal-form">
            {% csrf_token %}
            {% crispy emailme_form emailme_form.helper %}
            </div>
    </div>
        <div class="modal-footer">
          <button type="submit" name="submit" value="submit" class="btn btn-success pull-right" id="submit-id-submit"><span class="glyphicon glyphicon-send"></span> Send</button>
        </div>
      </form>
      </div>

    </div>
  </div> 
</div>

Answer 3

我知道这是一个老问题。您可以通过为 ButtonHolder 指定 css_class 参数来包装按钮。例如，它的工作方式如下（与字段包装器一起）：

    self.helper.layout = Layout(
        Div(*self.fields, css_class="modal-body"),
        ButtonHolder(
            Button('cancel', 'Cancel', css_class="btn btn-md btn-default",
                   data_dismiss="modal"),
            Submit('submit', 'Create', css_class='btn-default'),
            css_class="modal-footer")
        )
     )

Django-crispy-forms 将提交按钮放在不同的位置

Django-crispy-forms place Submit button in different location

django

django-crispy-forms