How to handle multiple forms in same page

Using Django
1

Hi

My page consists of two forms

  1. New Project for adding data (Post Data)
  2. Search Project for (Get Data) I apply django_filter module

Once I can click either of them, It got stuck.
I cannot do anything both search data and add new data.

How to fix it in case of multiple forms and submitting ?

multiple-form
multiple-form878×411 68 KB

This below is my HTML code

{% extends "app/layout.html" %}

{% block content %}
    {% if messages %}
        <ul>
            {% for message in messages %}
                <li><strong>{{ message }}</strong></li>
            {% endfor %}
        </ul>
    {% endif %}
    <h1> {{ mode }} Project</h1>
    <form action="" method="post" autocomplete="off">
        {% csrf_token %}
        <table>
            <tr>
                <td>{{ form.enq_id.label }}:
                    {{ form.enq_id }}</td>

                <td>{{ form.project_name.label }}:
                    {{ form.project_name }}</td>

                <td>{{ form.customer_po.label }}:
                    {{ form.customer_po }}</td>

                <td>{{ form.company.label }}:
                    {{ form.company }}</td>

            </tr>
        </table>
        <div align="center"><input type="submit" value="Submit">
            <a href="{% url 'manage_project' %}">New Project</a></div>

        <hr>
        <h2>Search Project</h2>
        <form method="get">
            {{ projectFilter.form }}
            <button class="btn btn-primary" type="submit">Search</button>
        </form>

    </form>
    <h2>List project.</h2>

    <table>
        <tr>
            <td>ID</td>
            <td>ENQ</td>
            <td>Company</td>
            <td>Title</td>
            <td>PO-Number</td>
            <td>Total Inventories</td>
            <td><b>Update</b></td>
            <td>   {% if user.is_superuser %}<b>Delete</b> {% endif %}</td>
            <td><b>Manage Inventory</b></td>
        </tr>
        {% for project in projectList %}

            <tr>
                <td>{{ project.id }}</td>
                <td>{{ project.enq_id }}</td>
                <td>{{ project.company }}</td>
                <td>{{ project.project_name }}</td>
                <td>{{ project.customer_po }}</td>
                <td>{{ project.total_inventories }}</td>
                <td><a href="{% url 'manage_project' project.id %}">Update</a></td>
                <td>
                    {% if user.is_superuser %}
                        <a href="{% url 'delete_project' project.id %}">Delete</a>
                    {% endif %}

                </td>
                <td>
                    <a href="{% url 'add_inventory' project.id %}">New</a>
                    <a href="{% url 'copy_inventory' project.id %}">Copy</a>
                </td>


            </tr>
        {% endfor %}
    </table>


{% endblock %}
2

You have one <form> nested inside the other in your HTML. The browser probably ignores the inner one and interprets them as the same <form>, hence requiring all fields to be filled in.

Remove the nesting and your problem will be fixed.

1 Like
3

Good, It is very nice.