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!
>Solution :
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 %}