Django脆皮表单将提交按钮放在不同的位置

Question

我使用的是Django crispy表单，我希望能够将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

模板是一个引导模式弹出窗口。该模态最初显示一个带有可供选择的GPSimConfig项列表的窗体。当用户选择一个项目时，通过JQuery将这个表单加载到一个跨度中。

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

以下是加载到模态的“模态内容”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 %}

span“add_gpsim_config_span”是通过Jquery加载表单的地方，提交按钮与表单关闭标记一起放置在那里。我想把Submit放在“Submit div”div中。

有办法做到这一点吗？

Answer 1

我有一个完全相同的问题。不使用jQuery的一种方法是在\uuuu init\uuuu包含self。帮手form_tag=False。然后，在“模式内容”中编写表单标记，使其包含模式页眉、正文和页脚。在您的情况下，似乎必须为此使用嵌套块，但以下是我的工作解决方案：

<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 2

我知道这是一个古老的问题。您可以通过指定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")
        )
     )

Answer 3

首先，从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();
});