How to Solve Error Message when cannot submit form in Django Application

Introduction

There is an error message appear. That error message appear not in the form of error message but rather in the URL address of the submitted form which is kind of weird. The following is the URL address after submitting the form which is not should be in that kind of form :

http://localhost:8000/create-room/?csrfmiddlewaretoken=TE0Ngn0WDEUkTI6AtATLfXic9XZUFBHwVB1iwhHl5CU8BVgcbEbRucSl93XiHm9O&host=2&topic=3&name=I+wanna+learn+HTML&description=

First of all, checking the function which is handling the process for the form submit process as in the ‘views.py’ as follows :

def createRoom(request):
    logging.basicConfig(level=logging.WARNING)
    logger = logging.getLogger('apps')
    form = RoomForm()
    if request.method == 'POST':
        print("Print : ",request.POST)
        form = RoomForm(request.POST)
        logging.info(form)
        logging.info("Submitted Form")
        if form.is_valid():
            form.save()
            logging.info("Save Form")
            return redirect('home')
    context = {'form':form}
    return render(request,'base/room_form.html', context)

The above function with the name of ‘createRoom’ is just defining how to process the form from the Django-based HTML template with the name of ‘room_form.html’. If there is no POST method action in the form, it will just render the Django-based HTML template with the name of ‘room_form.html’ in the base folder. So, the following is the content of the ‘room_form.html’ :

The following one is checking the form which exist in the Django-based template HTML file as follows :

{% extends 'main.html' %}
{% block content %}
<div>
    <form methods="POST" action="{% url 'create-room' %}">
        {% csrf_token %}
        <!-- {{form}} -->
        {{form.as_p}}
        <input type="submit" value="Submit"></input>
    </form>
</div>
{% endblock content %}

Solution

There are several attempts available in order to solve the problem. The following is those attempt until it ends in a successful result :

1. The first one is by trying to revise or to edit the form by getting rid of the {% csrf_token %} syntax. So, the Django-based template file with the name of ‘room_form.html’ will end up as follows :

   {% extends 'main.html' %}
   {% block content %}
   <div>
       <form methods="POST" action="{% url 'create-room' %}">
           <!-- {{form}} -->
           {{form.as_p}}
           <input type="submit" value="Submit"></input>
       </form>
   </div>
   {% endblock content %}

   But it ends with another different submitted form URL address as follows :

    
   http://localhost:8000/create-room/?host=2&topic=3&name=I+wanna+learn+HTML&description=
   

2. As a second thought, after rechecking everything, the problem lies on one simple mistake. It is because of the form syntax. The following is the form definition :

       <form methods="POST" action="{% url 'create-room' %}">
           <!-- {{form}} -->
           {{form.as_p}}
           <input type="submit" value="Submit"></input>
       </form>
   

   The above form definition is wrong. It is actually ‘method’ not ‘methods’. Because it is wrong, the form does not have any kind of methods for submitting it. So, it will just fire everything in the URL address after submitting the form. In the end, the solution is just for correcting the syntax form of the form. In conclusion, it will also cause the same result if there is no ‘method’ attribute of the form exist. It will also fire the content of the form in the URL part of the submitted form. So, the correction is to revise the file ‘room_form.html’ using the form as follows :

   {% extends 'main.html' %}
   {% block content %}
   <div>
       <form method="POST" action="{% url 'create-room' %}">
           <!-- {{form}} -->
           {{form.as_p}}
           <input type="submit" value="Submit"></input>
       </form>
   </div>
   {% endblock content %}