Django-crispy-forms place Submit button in different location

Question

I'm using Django-crispy-forms, and I want to be able to place the Submit button in a different place than right next to the bottom of the form.

Here is my form:

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

The template, is a Bootstrap modal popup. The modal initially shows a form with a list of GPSimConfig items to choose from. When the user chooses an item, then a span is loaded with this form via Jquery.

At the bottom of the modal, there is a cancel button, and I want to put the submit button down at the bottom next to the cancel button, but when the crispy-form is generated, it puts the submit button right after the last field and closes the form.

Here is the template that is loaded into the modal's '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 %}

The span "add_gpsim_config_span" is where the form will get loaded via Jquery, and the Submit button gets placed there, along with the form closing tag. I would like to put the Submit in the "submit-div" div, instead.

Is there a way to do this?

Answer 1

First, remove the ButtonHolder(Submit()) button from your FormHelper.

Then just put the button into your submit-div, something like:

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

And use jQuery to submit the form when you click the button:

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

Answer 2

I know this is an old question. You can wrap the buttons by specifying css_class parameter for ButtonHolder. For you example, it works like this (together with fields wrapper):

    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

I had this exact same question. One way to do this without jQuery is in your __init__ include self.helper.form_tag = False. Then, in 'modal-content' write your form tag so that it encompasses the modal header, body, and footer. It looks like in your case you would have to use nested blocks for this, however here is my working solution:

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