Why is my Django FormModel is not submitted when I click submit button?

Question

I am working on simple login and signup pages on Django.
This is how they work:
You create an account in the signup page. After the process is complete, it redirects you to the login page.
However, when you click a button to submit information on the signup page, it is not submitted.

Here are the codes:
urls.py

from django.urls import path, include
from . import views

urlpatterns = [
    path('account/login', views.login_page, name='login'),
    path('account/signup', views.signup_page, name='signup')
]

models.py

from django.db import models

class User(models.Model):
    username = models.CharField(max_length=30,)
    password = models.CharField(max_length=255)
    firstName = models.CharField(max_length=255)
    lastName = models.CharField(max_length=255)
    emailAddress = models.EmailField(max_length=255)

    def __str__(self):
        return self.username

forms.py

from .models import User
from django.forms import ModelForm, TextInput, PasswordInput, EmailInput

class UserForm(ModelForm):
    class Meta:
        model = User
        fields = ['username',
                  'password',
                  'firstName',
                  'lastName',
                  'emailAddress']
        widgets = {
            'username': TextInput(attrs={
                'class': 'signup_input',
                'placeholder': 'Username'
            }),
            'password': PasswordInput(attrs={
                'class': 'signup_input',
                'placeholder': 'Password'
            }),
            'firstName': TextInput(attrs={
                'class': 'signup_input',
                'placeholder': 'First Name'
            }),
            'lastName': TextInput(attrs={
                'class': 'signup_input',
                'placeholder': 'Last Name'
            }),
            'emailAddress': EmailInput(attrs={
                'class': 'signup_input',
                'placeholder': 'Email Address'
            })
        }
        labels = {
            'username': '',
            'password': '',
            'firstName': '',
            'lastName': '',
            'emailAddress': ''
        }

views.py

from django.shortcuts import render, redirect
from .forms import UserForm


def login_page(request):
    return render(request, 'Account/login_page.html')


def signup_page(request):
    if request.method == 'POST':
        form = UserForm(request.POST)
        form.save()
        return redirect('login')
    else:
        form = UserForm()
        context = dict()
        context['form'] = form
        return render(request, 'Account/signup_form.html', context=context)

signup_page.html

{% load static %}
<!DOCTYPE html>
<head>
  <style>
    * {
      box-sizing: border-box;
    }
    html {
      min-height: 100%;
      height: 100%;
      margin: 0;
    }
    body {
      height: 100%;
      padding: 1px;
      margin: 0;
    }

    #signup_form_container {
      height: 600px;
      width: 450px;
      border: 1px black solid;
      margin-left: auto;
      margin-right: auto;
      margin-top: 100px;
    }
    .signup_input {
      display: block;
      height: 46px;
      width: 250px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 15px;
      border-radius: 15px;
    }
    .signup_btn {
      display: block;
      height: 46px;
      width: 250px;
      border-radius: 15px;
      margin-left: auto;
      margin-right: auto;
    }
  </style>
</head>
<body>
  <div id="signup_form_container">
    {% block form%}
    {% endblock %}
    <input type="submit" class="signup_btn" value="Submit"/>
    <button class="signup_btn">Cancel</button>
  </div>
</body>

signup.form.html

{% extends 'Account/signup_page.html' %}

{% block form %}
  <form method="post" action={% url 'signup' %}>{% csrf_token %}
    {{form}}
  </form>
{% endblock %}

Everything works fine except submitting the information. When I click submit button, nothing happens. It seems like post method is not working properly for some reason. I’ve been google searching and checking my codes to find out if there is something missing but I could not find the solution for the issue. I’d be very appreciated if somebody could solve this issue!

Asked By: gtj520

||

Source

Answer 1

The submit button needs to be contained in the <form> tag to submit that form when clicked. Move the button to signup.form.html and remove it from signup_page.html

signup.form.html

{% extends 'Account/signup_page.html' %}

{% block form %}
  <form method="post" action={% url 'signup' %}>{% csrf_token %}
    {{form}}
    <input type="submit" class="signup_btn" value="Submit"/>
  </form>
{% endblock %}

Answered By: Iain Shelvington

Why is my Django FormModel is not submitted when I click submit button?

Question:

Answers: