Question

我正在使用Django-crispy-forms，我希望能够将Submit按钮放在与表单底部不同的位置。

这是我的表格：

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使用此表单加载span。

在模式的底部，有一个取消按钮，我想将提交按钮放在取消按钮旁边的底部，但是当生成脆形式时，它会立即放置提交按钮最后一个字段并关闭表单。

这是加载到模态'模态内容'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按钮将与表单结束标记一起放置在那里。我想把提交放在“submit-div”div中，而不是。

有办法做到这一点吗？

Answer 1

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

然后只需将按钮放入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

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

    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将提交按钮放在不同位置

2 个答案: