Django-crispy-forms place Отправить кнопку в другом месте

Я использую Django-хрустящие формы, и я хочу, чтобы можно было разместить кнопку Submit в другом месте, а не в нижней части формы.Django-crispy-forms place Отправить кнопку в другом месте

Вот моя форма:

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 загружается интервал.

В нижней части модальной кнопки есть кнопка отмены, и я хочу, чтобы кнопка отправки была внизу внизу кнопки отмены, но когда сформирована хрустящая форма, она нажимает кнопку отправки после последнего поля и закрывает форму.

Вот шаблон, который загружается в 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 «submit-div».

Есть ли способ сделать это?

источник

2015-09-24 zoidberg

Сначала удалите кнопку 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(); 
});

источник

2015-09-29 20:08:59 YPCrumble

Я хочу, чтобы хрустящая-форма была более гибкой, чтобы иметь возможность положить вещи, где вы хотите их, но это обходное решение работает для меня. – zoidberg

@zoidberg, что я обычно делаю, это использование 'self.helper.form_tag = False', а затем оберните тег'

'вручную вокруг всех полей и кнопки« Отправить », где бы я ни захотел. – YPCrumble

я имел это точно такой же вопрос. Один из способов сделать это без 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>

источник

2016-08-15 23:40:03

Django-crispy-forms place Отправить кнопку в другом месте

ответ

Смежные вопросы