Dynamic forms data is not getting sent in the POST

81 views

Skip to first unread message

sushovan majumdar

unread,

Oct 20, 2015, 2:52:35 PM10/20/15

to Django users

I'm trying to add dynamic forms to my inline formset using the steps mentioned in the post: Add a dynamic form to a django formset using javascript in a right way

I have inline formsets which i'm rendering using crispy forms.

rendering code in template:

            <div>
                {{ formset.management_form|crispy }}
            </div>
            <div id="items-form-container">
            {% for form in formset.forms %}
            <div id="item-{{ forloop.counter0 }}">
                {% crispy form formset.crispy_helper %}
            </div>
            {% endfor %}                
            </div>

empty form template is used for adding new rows:

 <script type="text/html" id="item-template">
                <div id="item-__prefix__">
                {% crispy formset.empty_form formset.crispy_helper %} 
                </div>
                </script>
                <a href="#" id="add-item-button" class="btn btn-info add-profile_kvp">Add profile_kvp</a>
I have a small javascript code to handle on click on the button and updating the html and management form:
$(document).ready(function() {
    $('.add-profile_kvp').click(function(ev) {
        ev.preventDefault();
        var count = parseInt($('#id_profile_kvp-TOTAL_FORMS').val());
        var tmplMarkup = $('#item-template').html();
        var compiledTmpl = tmplMarkup.replace(/__prefix__/g, count);
        $('div#items-form-container').append(compiledTmpl);

        // update form count
        $('#id_profile_kvp-TOTAL_FORMS').val(count+1);

    });
});
When I click the button Add profile_kvp button i'm able to update the DOM properly with new values and it's looks fine in browser.
Problem appears when i submit the formset then I don't see the dynamically added forms/row in formset in views.py and so not able to view dynamically added values in server side. In server side i see new rows as empty rows without data. I see total forms value updated but all new forms are empty.

All the dynamically added forms went as empty forms and didn't have the values which I entered in the browser.

James Schneider

unread,

Oct 21, 2015, 1:22:58 AM10/21/15

to django...@googlegroups.com

> rendering code in template:
>
>             <div>
>                 {{ formset.management_form|crispy }}
>             </div>
>             <div id="items-form-container">
>             {% for form in formset.forms %}
>             <div id="item-{{ forloop.counter0 }}">
>                 {% crispy form formset.crispy_helper %}
>             </div>
>             {% endfor %}
>             </div>

What does the rendered HTML look like? I think you need to wrap everything in a set of <form></form> tags.

-James

sushovan majumdar

unread,

Oct 21, 2015, 10:58:31 AM10/21/15

to Django users

Hi James.

I'm copying the rendered HTML from browser view source:

<body class="">
<div id="container">
 <div id="header">
 <div id="branding">
 
 

 </div>
 
 <div id="main-menu">
 <a href="/agent_config" title="Agent configuration">Configuration</a>
 <a href="/agent_status" title="Agent connectivity status">Status</a>
 <a href="/agent_testing" title="Agent alert rule testing">Testing</a>
 </div>
 <div id="user-tools">
 
 Welcome,
 <strong>Sushovan</strong>.
 
 
 <a href="/admin/">Admin Editor</a>
 
 <a href="/logout">Logout</a>
 
 
 </div>
 
 </div>
 
 <div id="content" class="colM">
 
 
 
 <div id="content-main">
 <h3 class="subhead">Host group: <b>hostmon-relay__development__app</b>
 Profile: <b>solaris_clone</b> 
 </h3>
 <div class="text-right">
 
 <form method="post" action="/agent_config/hostgroup/1160/profile/54">
 <input type="hidden" name="csrfmiddlewaretoken" value="o0IELXj2bHKlofgXI7VTUGMMhimpc2Wu">
 <input class="btn btn-default" type="submit" value="Save" name="Save" default="">
 <input class="btn btn-default" type="submit" value="Deploy" name="Deploy">
 <a href="/agent_config/hostgroup/1160"><input class="btn btn-default" type="button" value="Cancel"></a>
 
 </form></div>


 
 
 <fieldset>
 
 <div class="panel panel-default"> 
 <div class="panel-heading"> 
 <h4 class="panel-title"> 
 <a class="accordion-toggle" data-toggle="collapse" data-parent="#" href="#profile_kvp" aria-expanded="true">Optional Key, Value Pairs Added to All Types</a> </h4> </div>
 <div id="profile_kvp" class="panel-collapse collapse in" aria-expanded="true">
 <div class="panel-body"> 
 <div> 
 <!-- <legend>Optional Key, Value Pairs Added to All Types</legend> -->
 
 <div>
 


<input id="id_profile_kvp-TOTAL_FORMS" name="profile_kvp-TOTAL_FORMS" type="hidden" value="4"> <input id="id_profile_kvp-INITIAL_FORMS" name="profile_kvp-INITIAL_FORMS" type="hidden" value="1"> <input id="id_profile_kvp-MIN_NUM_FORMS" name="profile_kvp-MIN_NUM_FORMS" type="hidden" value="0"> <input id="id_profile_kvp-MAX_NUM_FORMS" name="profile_kvp-MAX_NUM_FORMS" type="hidden" value="1000">


 </div>
 <div id="profile_kvp-items-form-container">
 
 <div id="profile_kvp-0" class="profile_kvp-form-container">
 


<div> <div class="row"> <div class="col-md-6"> <div id="div_id_profile_kvp-0-key" class="form-group"> <div class="controls "> <input class="textinput textInput form-control" id="id_profile_kvp-0-key" maxlength="255" name="profile_kvp-0-key" type="text" value="1"> </div> </div> </div>
<div class="col-md-4"> <div id="div_id_profile_kvp-0-value" class="form-group"> <div class="controls "> <input class="textinput textInput form-control" id="id_profile_kvp-0-value" maxlength="255" name="profile_kvp-0-value" type="text" value="1"> </div> </div> </div>
<div class="col-md-1"> <div class="form-group"> <div id="div_id_profile_kvp-0-DELETE" class="form-group"> <div class="controls "> <input class="checkboxinput" id="id_profile_kvp-0-DELETE" name="profile_kvp-0-DELETE" type="checkbox"> </div> </div> </div> </div>


</div>


</div> <input id="id_profile_kvp-0-profile" name="profile_kvp-0-profile" type="hidden" value="54"> <input id="id_profile_kvp-0-id" name="profile_kvp-0-id" type="hidden" value="75">


 </div>
 
 <div id="profile_kvp-1" class="profile_kvp-form-container">
 


<div> <div class="row"> <div class="col-md-6"> <div id="div_id_profile_kvp-1-key" class="form-group"> <div class="controls "> <input class="textinput textInput form-control" id="id_profile_kvp-1-key" maxlength="255" name="profile_kvp-1-key" type="text"> </div> </div> </div>
<div class="col-md-4"> <div id="div_id_profile_kvp-1-value" class="form-group"> <div class="controls "> <input class="textinput textInput form-control" id="id_profile_kvp-1-value" maxlength="255" name="profile_kvp-1-value" type="text"> </div> </div> </div>
<div class="col-md-1"> <div class="form-group"> <div id="div_id_profile_kvp-1-DELETE" class="form-group"> <div class="controls "> <input class="checkboxinput" id="id_profile_kvp-1-DELETE" name="profile_kvp-1-DELETE" type="checkbox"> </div> </div> </div> </div>


</div>


</div> <input id="id_profile_kvp-1-profile" name="profile_kvp-1-profile" type="hidden" value="54"> <input id="id_profile_kvp-1-id" name="profile_kvp-1-id" type="hidden">


 </div>
 
 
 <div id="profile_kvp-2" class="profile_kvp-form-container">
 


<div> <div class="row"> <div class="col-md-6"> <div id="div_id_profile_kvp-2-key" class="form-group"> <div class="controls "> <input class="textinput textInput form-control" id="id_profile_kvp-2-key" maxlength="255" name="profile_kvp-2-key" type="text"> </div> </div> </div>
<div class="col-md-4"> <div id="div_id_profile_kvp-2-value" class="form-group"> <div class="controls "> <input class="textinput textInput form-control" id="id_profile_kvp-2-value" maxlength="255" name="profile_kvp-2-value" type="text"> </div> </div> </div>
<div class="col-md-1"> <div class="form-group"> <div id="div_id_profile_kvp-2-DELETE" class="form-group"> <div class="controls "> <input class="checkboxinput" id="id_profile_kvp-2-DELETE" name="profile_kvp-2-DELETE" type="checkbox"> </div> </div> </div> </div>


</div>


</div> <input id="id_profile_kvp-2-profile" name="profile_kvp-2-profile" type="hidden" value="54"> <input id="id_profile_kvp-2-id" name="profile_kvp-2-id" type="hidden">
 
 </div>
 
 <div id="profile_kvp-3" class="profile_kvp-form-container">
 


<div> <div class="row"> <div class="col-md-6"> <div id="div_id_profile_kvp-3-key" class="form-group"> <div class="controls "> <input class="textinput textInput form-control" id="id_profile_kvp-3-key" maxlength="255" name="profile_kvp-3-key" type="text"> </div> </div> </div>
<div class="col-md-4"> <div id="div_id_profile_kvp-3-value" class="form-group"> <div class="controls "> <input class="textinput textInput form-control" id="id_profile_kvp-3-value" maxlength="255" name="profile_kvp-3-value" type="text"> </div> </div> </div>
<div class="col-md-1"> <div class="form-group"> <div id="div_id_profile_kvp-3-DELETE" class="form-group"> <div class="controls "> <input class="checkboxinput" id="id_profile_kvp-3-DELETE" name="profile_kvp-3-DELETE" type="checkbox"> </div> </div> </div> </div>


</div>


</div> <input id="id_profile_kvp-3-profile" name="profile_kvp-3-profile" type="hidden" value="54"> <input id="id_profile_kvp-3-id" name="profile_kvp-3-id" type="hidden">
 
 </div>
 </div>
 <script type="text/html" id="item-template-profile_kvp">
 <div id="profile_kvp-__prefix__" class="profile_kvp-form-container">
 


<div 
 > <div 
 class="row" > <div 
 class="col-md-6" > <div id="div_id_profile_kvp-__prefix__-key" class="form-group"> <div class="controls "> <input class="textinput textInput form-control" id="id_profile_kvp-__prefix__-key" maxlength="255" name="profile_kvp-__prefix__-key" type="text" /> </div> </div> </div>
<div 
 class="col-md-4" > <div id="div_id_profile_kvp-__prefix__-value" class="form-group"> <div class="controls "> <input class="textinput textInput form-control" id="id_profile_kvp-__prefix__-value" maxlength="255" name="profile_kvp-__prefix__-value" type="text" /> </div> </div> </div>
<div 
 class="col-md-1" > <div class="form-group"> <div id="div_id_profile_kvp-__prefix__-DELETE" class="form-group"> <div class="controls "> <input class="checkboxinput" id="id_profile_kvp-__prefix__-DELETE" name="profile_kvp-__prefix__-DELETE" type="checkbox" /> </div> </div> </div> </div>


</div>


</div> <input id="id_profile_kvp-__prefix__-profile" name="profile_kvp-__prefix__-profile" type="hidden" value="54" /> <input id="id_profile_kvp-__prefix__-id" name="profile_kvp-__prefix__-id" type="hidden" />
 
 </div>
 </script>
 <a href="#" id="add-profile_kvp" class="btn btn-link add-profile_kvp">Add profile_kvp</a> 
 
 </div>
 </div>
 </div>
 </div>
 </fieldset>
 
 
 <div class="text-right">
 
 <input class="btn btn-default" type="submit" value="Save" name="Save" default="">
 <input class="btn btn-default" type="submit" value="Deploy" name="Deploy">
 <a href="/agent_config/hostgroup/1160"><input class="btn btn-default" type="button" value="Cancel"></a>
 
 
 </div>
 </div>


 
 
 
 <br class="clear">
 </div>
</div>






</body>

My forms is in the <div class="text-right">.

Entire formset is rendered under the <fieldset> tag.

Here is my template html code:

the body:

{% block content %}
  <div id="content-main">
    <h3 class="subhead">Host group: <b>{{ profile.hostgroup.name }}</b>
      Profile: <b>{{ profile.name }}</b> {{ read_only|yesno:" (read-only),," }}
    </h3>
    <div class="text-right">
    {% if read_only %}
      <a href="{% url 'agntcfg:hostgroup' profile.hostgroup.id %}"
        ><input class="btn btn-default" type="button" value="return"
            default></a>
    {% else %}
      <form method="post"
           action="{% url 'agntcfg:profile' profile.hostgroup.id profile.id %}">
        {% csrf_token %}
        <input class="btn btn-default" type="submit" value="Save" name="Save"
               default >
        <input class="btn btn-default" type="submit" value="Deploy"
               name="Deploy">
        <a href="{% url 'agntcfg:hostgroup' profile.hostgroup.id %}"
          ><input class="btn btn-default" type="button" value="Cancel"></a>
    {% endif %}
    </div>


    {% for formset in sections %}
    {% if formset.forms %}
        <fieldset>          
        <div class="panel panel-default"> 
        <div class="panel-heading"> 
        <h4 class="panel-title"> 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#" href="#{{ formset.prefix }}">{{ formset.legend }}</a> </h4> </div>
        <div id="{{ formset.prefix }}" class="panel-collapse collapse" >
        <div class="panel-body"> 
        <div>  
        <!-- <legend>{{ formset.legend }}</legend> -->
        {% if not formset.child_formset_classes %}
        <div>
              {{ formset.management_form|crispy }}
          </div>
          <div id="{{ formset.prefix }}-items-form-container" >


    {% for form in formset.forms %}

<div id="{{ formset.prefix }}-{{ forloop.counter0 }}" class="{{ formset.prefix }}-form-container">


    {% crispy form formset.crispy_helper %}
    </

div>
  {% endfor %}
  </div>
  <script type="text/html" id="item-template-{{ formset.prefix }}">
 <div id="{{ formset.prefix }}-__prefix__"  class="{{ formset.prefix }}-form-container">


    {% crispy formset.empty_form formset.crispy_helper %} 
 </div>
 </script>

        <a href="#" id="add-{{ formset.prefix }}" class="btn btn-link add-{{ formset.prefix }}">Add {{ formset.prefix }}</a>             
            {% endif %}
            </div>
            </div>
            </div>
            </div>
        </fieldset>
      {% endif %}
    {% endfor %}
    <div class="text-right">
      {% if read_only %}
        <a href="{% url 'agntcfg:hostgroup' profile.hostgroup.id %}"
          ><input class="btn btn-default" type="button" value="return"
              default></a>
      {% else %}
        <input class="btn btn-default" type="submit" value="Save" name="Save"
               default >
        <input class="btn btn-default" type="submit" value="Deploy"
               name="Deploy">
        <a href="{% url 'agntcfg:hostgroup' profile.hostgroup.id %}"
          ><input class="btn btn-default" type="button" value="Cancel"></a>
     </form>
      {% endif %}
    </div>
  </div>
{% endblock content %}

I'm struggling with this issue for past one week. I would really appreciate if you can point me to right direction.

sushovan majumdar

unread,

Oct 21, 2015, 11:23:58 AM10/21/15

to Django users

Thanks James. I changed the rendering to move the fieldset inside the form tag and it works. Thank you so much