0

I am trying to develop a webpage with two forms on the same page with Django. Anyone will able to fillup any single form and submit it, then that data will be saved in the database. Here I try to avoid Django's default model form and any type of js stuff also.

My HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

    <!-- animated css link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>

    <!-- font awsome css link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- custom css link -->
    <link rel="stylesheet" type="text/css" href="#">

</head>
<body>

    <div class="row m-0 bg-info">
        <h2 class="mx-auto my-4">Multiple form in one page</h2>
    </div>
    
    <div style="height: 40px;"></div>
    <div class="container-fluid my-5">
        <div class="row m-0 d-flex justify-content-center">

            <div class="col-md-3">
                <h2>Employee Profile</h2>
                <form class="#" method="POST" id="EmployeeProfile">
                    <div class="form-group">
                        <label>Ranks</label>
                        <input type="text" class="form-control" name="ranks" placeholder="Enter ranks">
                    </div>
                    <div class="form-group">
                        <label>salary</label>
                        <input type="text" class="form-control" name="salary" placeholder="Enter salary">
                    </div>

                    <div class="row d-flex justify-content-center">
                        <button type="submit" class="btn btn-primary m-2">Submit</button>
                    </div>
                </form>
            </div>

            <div class="col-md-2"></div>

            <div class="col-md-3">
                <h2>Inspector Profile</h2>
                <form class="#" method="POST" id="InspectorProfile">
                    <div class="form-group">
                        <label>Ranks</label>
                        <input type="text" class="form-control" name="ranks" placeholder="Enter ranks">
                    </div>
                    <div class="form-group">
                        <label>Your email</label>
                        <input type="email" class="form-control" name="email" placeholder="email">
                    </div>

                    <div class="row d-flex justify-content-center">
                        <button type="submit" class="btn btn-primary m-2">Submit</button>
                    </div>
                </form>
            </div>

        </div>
    </div>


</body>
</html>

Here how can I code my views.py with function based view to get data from this form? and how to determine which form sent me that data.

Kanchon Gharami
  • 477
  • 9
  • Take a look at https://stackoverflow.com/questions/1395807/proper-way-to-handle-multiple-forms-on-one-page-in-django – misraX Dec 25 '20 at 16:01

1 Answers1

1

You can do that by setting different form action and by making different view for perticular form like this inside your template :

 <form method="POST" action="{% url 'form1' %}">
    ........all input fields
    </form>
    
    <form method="POST" action="{% url 'form2' %}">
    ........all input fields
    </form>

inside your views.py : 

def form1(request):
  if request.method == "POST":
      ...get all values
      return render(request,'forms.html')

def form2(request):
  if request.method == "POST":
      ...get all values
      return render(request,'forms.html')
Ankit Tiwari
  • 878
  • 3
  • 22