How to handle multiple forms in same page


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 ?

This below is my HTML code

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

{% block content %}
    {% if messages %}
            {% for message in messages %}
                <li><strong>{{ message }}</strong></li>
            {% endfor %}
    {% endif %}
    <h1> {{ mode }} Project</h1>
    <form action="" method="post" autocomplete="off">
        {% csrf_token %}
                <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>{{ }}:
                    {{ }}</td>

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

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

    <h2>List project.</h2>

            <td>Total Inventories</td>
            <td>   {% if user.is_superuser %}<b>Delete</b> {% endif %}</td>
            <td><b>Manage Inventory</b></td>
        {% for project in projectList %}

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

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

        {% endfor %}

{% endblock %}

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

Good, It is very nice.