You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: units/django/5/form-processing.md
+90Lines changed: 90 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -48,6 +48,96 @@ todoapp=# SELECT * FROM todos_todo;
48
48
(6 rows)
49
49
```
50
50
51
+
## Forms
52
+
Now that we know how to create or manipulate our data. We need to work on our forms so as to allow our users to create and update data using them.
53
+
54
+
### Create Todo Form
55
+
We already have setup a page with the create todo form previously now we're going to make it fully functional. Before doing that we need to add a new url to which the form will be submitted to.
56
+
57
+
#### Add a new url
58
+
So, we'll start by adding a new url `save` to our `todos/urls.py` file, which should look like this:
59
+
60
+
```python
61
+
from django.conf.urls import url
62
+
from todos import views
63
+
64
+
urlpatterns = [
65
+
url(r'^$', views.index, name='index'),
66
+
url(r'^create$', views.create, name='create'),
67
+
url(r'^save$', views.save, name='save')
68
+
]
69
+
```
70
+
#### Add a new view function
71
+
Now we'll also need to add `views.save` function that we're referenced above, which should look like this:
72
+
73
+
```python
74
+
from django.shortcuts import render, redirect
75
+
76
+
defsave(request):
77
+
#TODO: Logic to save the todo item here.
78
+
79
+
return redirect('index')
80
+
```
81
+
82
+
Currently, the above code does nothing but just redirect back to `index` page url. But here we need to get the data received from the form, save it and then finally redirect to index.
83
+
84
+
### Saving the form data
85
+
Let's update the `save` function we've just created to receive data from the form and save it using our `Todo` model. The code should look like this:
86
+
87
+
```python
88
+
from django.shortcuts import render, redirect
89
+
from django.utils import timezone
90
+
from todos.models import Todo
91
+
92
+
defsave(request):
93
+
# Get the form data from the request.
94
+
title = request.POST.get('title')
95
+
description = request.POST.get('description')
96
+
97
+
# Create a new todo item with the data.
98
+
Todo.objects.create(
99
+
title=title,
100
+
description=description,
101
+
created_at=timezone.now()
102
+
)
103
+
104
+
# Redirect back to index page
105
+
return redirect('index')
106
+
107
+
```
108
+
109
+
### Updating the HTML form
110
+
We now need to update our HTML form to submit the data properly to the server like what we've expected in the above code.
111
+
112
+
We'll need to ensure the following things:
113
+
1. Form should be submitted to url `save` (`name='save'`).
114
+
2. Form should be submitted using method `POST`
115
+
3. Two form fields are required to be sent `title` and `description` for the todo item.
116
+
4. And CSRF token should be sent along with the form too.
117
+
118
+
After making these changes to our plain html form it should look like this:
119
+
```html
120
+
{% extends 'base.html' %}
121
+
{% block content%}
122
+
<h3>Add Todo</h3>
123
+
<divclass="todo-form">
124
+
<formmethod="post"action="{% url 'save' %}">
125
+
{% csrf_token %}
126
+
<divclass="form-group">
127
+
<labelfor="input-todo-title">Title</label>
128
+
<inputtype="text"name="title"class="form-control"id="input-todo-title"placeholder="What do you want to do?">
0 commit comments