2016-10-25 7 views
0

Я построил динамические формы с использованием django formsets и javascript, но, к сожалению, при отправке формы отправляется только первая форма. Я бы хотел, чтобы все динамически добавленные формы также были представлены. Любая помощь будет оценена по достоинству. Просмотров:Сохранение динамических форм с более чем одной формой

def routestepinfo(request): 
    class RequiredFormSet(BaseFormSet): 
      def __init__(self, *args, **kwargs): 
       super(RequiredFormSet, self).__init__(*args, **kwargs) 
       for form in self.forms: 
        form.empty_permitted = False  
    RouteStepFormSet = formset_factory(RouteStepForm, formset=RequiredFormSet, extra=1, can_order=False, can_delete=True) 
    if request.method == 'POST': 
     formset = RouteStepFormSet(request.POST) 
     if formset.is_valid(): 
      for form in formset.forms: 
       form.save() 
       print 'apple' 
       return redirect("/buildpage/") 
    else: 
     formset = RouteStepFormSet() 
    return render(request, "buildpage/routestepinfo.html", {'formset' :formset}) 

HTML

<form id= "myForm" method = 'POST' action="{% url 'buildpage:routestepinfo' %}" enctype="multipart/form-data">{% csrf_token %} 
        {{ formset.management_form }} 
<div id="form_set">  
        {% for form in formset %} 
        <table class='no_error'> 
        <tbody>. 
        {{form.as_table}} 
        </tbody> 
        </table> 
        {% endfor %} 
</div> 
<p><input type = "button" value = "Add another step" id = "add_more" ></p> 
<div id="empty_form" style="display:none"> 
    <table class='no_error'> 
     {{ formset.empty_form.as_table }} 
    </table> 
</div> 
       <div id="forms"></div> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
       <input type = "submit" name = "Submit Steps"> 
        </form> 

JS Clone: ​​

<script> 
    $('#add_more').click(function() { 
     var form_idx = $('#id_form-TOTAL_FORMS').val(); 
     $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx)); 
     $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) + 1); 
    }); 
</script> 
+0

Кажется, что каждая динамическая форма не дает уникального атрибута имени. например. любые INPUT и т. д. внутри вашей 'formset.empty_form.as_table' будут нуждаться в изменении атрибута имени. Если, конечно, у вас нет префикса '__prefix__'. Если вы посмотрите на формы в хром-отладчике, все они получат уникальные атрибуты имени. – Keith

+0

Привет Кит, согласно документам, предоставляющим BaseFormSet, дает автоматический префикс __prefix__, если только я не понял. '' BaseFormSet'' предоставляет дополнительный атрибут '' empty_form'', который возвращает экземпляр формы с префиксом '' __prefix__'' для упрощения использования в динамических формах с использованием JavaScript. –

+0

Итак, я думаю, что следующий вопрос: существует ли способ создания уникальных идентификаторов с каждой дополнительной формой через javascript? –

ответ

0

Fixed его! Прошло всего неделю. Вот как это сработало. Представления в основном немодифицированы, просто добавлено commit = False, чтобы сохранить список.

def routestepinfo(request, slug=None): 
    RouteStepFormSet = formset_factory(RouteStepForm, formset = RequiredFormSet, extra=1) 
    if request.method == 'POST': 
     formset = RouteStepFormSet(request.POST) 
     print formset 
     if formset.is_valid(): 
      for form in formset.forms: 
       form_item = form.save(commit=False) 
       print form 
       form_item.save() 
       messages.success(request, "Record created") 
      return redirect ("/buildpage/") 
    else: 
     formset = RouteStepFormSet() 
    return render(request, "buildpage/routestepinfo.html",{'formset':formset}) 

Javascript был основным, что изменилось, и пришло немало дополнений и немного помощи SO. Префикс был первой проблемой, и это было исправлено с помощью formset.empty_form и его модификации. Еще одна важная часть - обновление всех форм, которые фиксировали проблему сбережений.

<script> 
$(document).ready(function() { 
    $('.add-item').click(function(ev) { 
     ev.preventDefault(); 
     var count = $('#items-form-container').children().length; 
     var tmplMarkup = $('#item-template').html(); 
     var compiledTmpl = tmplMarkup.replace(/__prefix__/g, count); 
     $('div#items-form-container').append(compiledTmpl); 

     // update form count 
     $('#id_form-TOTAL_FORMS').attr('value', count+1); 
     $('html, body').animate({ 
       scrollTop: $("#add-item-button").position().top-200 
      }, 800); 
    }); 
}); 
</script> 

И наконец, html. Это в сочетании некоторые из моих собственных вещей с очень полезной С.О. постом (забыл вопрос он пришел из), где formset создается как пустая форма и клонированный оттуда .:

 <div type="text/html" id="item-template"> 
      <table> 
       {{ formset.empty_form.as_table }} 
      </table> 
      </div> 
      <font face = Flexo> 
      <form id= "myForm" method = 'POST' action="{% url 'buildpage:routestepinfo' %}" enctype="multipart/form-data">{% csrf_token %} 
      {{ formset.management_form }} 
      <div id="items-form-container"> 

      {% for form in formset.forms %} 

      <div id="item-{{ forloop.counter0 }}"> 
      <table> 
      {{form.as_table}} 
      <table> 
      </div> 
      {% endfor %} 
      </div> 
      <a href="#" id="add-item-button" class="btn btn-info add-item">Add Step</a> 
     <input type = "submit" name = "Submit Steps"> 
      </form> 

Надеется, что это помогает некоторым людям. Cheers

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

  • Нет связанных вопросов^_^