0

I have a django for loop that is supposed to add items inside a form element. However, when the code executes, django just puts the first element inside the form and puts the following element outside the form html tag.

The code is:

<form action="." method="post" class="basket_summary" id="basket_formset">
{% csrf_token %}
{{ formset.management_form }}
{% for form in formset %}
    {% with line=form.instance product=form.instance.product %}
        {% purchase_info_for_line request line as session %}
        <div class="row no-margin cart-item">
            {{ form.id }}
            <div class="col-xs-12 col-sm-2 no-margin">
                {% with image=product.primary_image %}
                {% thumbnail image.original "100x100" upscale=True as thumb %}
                    <a href="{{ product.get_absolute_url }}" class="thumb-holder">
                        <img class="lazy" alt="" src="{{ thumb.url }}" />
                    </a>
                {% endthumbnail %}
                {% endwith %}
            </div> <!-- /.thumbnail holder -->

            <div class="col-xs-12 col-sm-5 ">
                <div class="title">
                    <a href="{{ product.get_absolute_url }}">{{ line.description }}</a>
                </div>
                <a href="#" onclick="$(this).closest('form').submit()">{% trans "Update" %}</a>
                {% if user.is_authenticated %}
                    | <a href="#" data-id="{{ forloop.counter0 }}" data-behaviours="save" class="inline">{% trans "Save for later" %}</a>
                {% endif %}
                <div style="display:none">
                    {{ form.save_for_later }}
                    {{ form.DELETE }}
                </div>
                {% for field_errors in form.errors.values %}
                    {% for error in field_errors %}
                        <span class="error-block"><i class="icon-exclamation-sign"></i> {{ error }}</span>
                    {% endfor %}

                {% endfor %}
            </div> <!-- /.Title holder -->

            <div class="col-xs-12 col-sm-3 no-margin">
                <div class="quantity">
                    <div class="le-quantity">
                        <form>
                            <a class="minus" href="#reduce"></a>
                            <input name="form-0-quantity" id="id_form-0-quantity" readonly="readonly" type="text" value="{{ form.quantity.value }}" />
                            <a class="plus" href="#add"></a>
                        </form>
                    </div>
                </div>
            </div><!-- /.Quantity Holder -->

            <div class="col-xs-12 col-sm-2 no-margin">
                <div class="price">
                    {% if line.is_tax_known %}
                        {{ line.unit_price_incl_tax|currency:line.price_currency }}
                    {% else %}
                        {{ line.unit_price_excl_tax|currency:line.price_currency }}
                    {% endif %}
                </div>
                <a href="#" data-id="{{ forloop.counter0 }}" data-behaviours="remove" class="inline close-btn"></a>
            </div> <!-- /.Price Holder -->

        </div><!-- /.cart-item -->
    {% endwith %}
{% endfor %}</form>

What I expect is that django should have multiple <div class="row no-margin cart-item"> items in the form tag but that isn't happening.

How do I fix this?

Gaurav Wadhwani
  • 1,352
  • 2
  • 15
  • 32
  • 2
    Maybe there is nothing wrong with template rendering. The html looks ill-formed: the first
    tag is not closed, and you have
    inside
    , the browser may discard the extra elements. To be sure, you can view the rendered page source instead of the DOM.
     – NeoWang Jul 13 '15 at 16:35
  • 2
    Form within form is forbidden. http://stackoverflow.com/questions/555928/is-it-valid-to-have-a-html-form-inside-another-html-form Browser behavior is not predictable in this case. – NeoWang Jul 13 '15 at 16:39
  • The form tag is closed. Have updated the question to reflect that. About form inside form - there isn't a nested form in there. Also, this code (http://www.codesend.com/view/5e6fb36f20213a39c39a3776dc791dd8/) works perfectly fine - it is the default template code and the code in question is my customised code. @NeoWang – Gaurav Wadhwani Jul 13 '15 at 17:10
  • Aah, I get what you were referring to (form within form)..My Bad. And yes, that was the issue - thank you – Gaurav Wadhwani Jul 13 '15 at 17:43

1 Answers1

0

Looks like you are missing closing form tag </form> at the end.

EDIT: as others mentioned in comments it could be because you have forms inside form. This will result in unpredictable behavior.

shreyas
  • 2,510
  • 4
  • 19
  • 20