Part 4: Building a User-Friendly Todo App with Flask - Step-by-Step Guide to Perform Form Submissions via POST Requests

Hey everyone, welcome to the fourth part of our Flask-based basic todo application series. In this post, I'll guide you through handling form submissions via POST requests in your Flask todo app. Let's dive in!

Our app comprises two form submissions: one for todo items and another for category items.

Start by updating your app.py file and add a new route to handle todo form submissions:

@app.route('/todos', methods=['POST'])
def add_todo():
    if request.method == 'POST':
        description = request.form['description']
        category = request.form['category']
        new_entry = Todo(description=description, category=category)
        db.session.add(new_entry)
        db.session.commit()
        return redirect(url_for('index'))

The above route accepts POST requests, retrieves the description and category values, and creates a new todo in our database. Upon successful creation, it redirects users back to the root URL.

Now, below the todo route, create another route to handle category form submissions:

@app.route('/categories', methods=['POST'])
def add_category():
    if request.method == 'POST':
        name = request.form['categoryname']
        new_entry = Category(name=name)
        db.session.add(new_entry)
        db.session.commit()
        return redirect(url_for('index'))

Similarly, this route accepts POST requests, retrieves the category name, and adds a new category entry to our database.

Navigate to your index.html file. If you've copied the HTML codes provided in the previous section, you're ready to proceed with the category form. Regarding the todo form, remember that each todo is associated with a category through a foreign key relationship. Therefore, head to the 'Add todo' section and update the form with the following code:

<form action="/todos" method="post" class="mx-auto bg-white p-6 rounded-md shadow-md">
    <input required type="text" name="description" id="todoInput" class="w-full px-4 py-2 border border-gray-300 rounded-md mb-4 focus:outline-none" placeholder="Add a new todo..">
    <select name="category" class="p-2 focus:outline-none mt-5 mb-5 w-full border-red-400 rounded-md">
        <option disabled>Select Category</option>
        {% for category in categories %}
            <option value="{{category.id}}">{{ category.name }}</option>
        {% endfor %}
    </select>
    <button type="submit" class="w-full p-2 bg-blue-400 text-white font-semibold">Add Todo</button>
</form>

This updated form enables users to select a category when creating a new todo.

Note that the todo form directs to the "/todos" route in app.py, while the category form also refers to the "/categories" route. This setup ensures that form submissions for both todos and categories are appropriately handled by their respective routes in the Flask application.

Once done, refresh your page. Start by creating new categories via the category form, then proceed to create several todos and assign them to different categories via the todo form. Observe your category and todo lists updating accordingly. Switch between categories to see the todo list change based on the selected category.

That's a wrap for this part! Check out the video below for a step-by-step tutorial.

Previous: Part 3: Building a User-Friendly Todo App with Flask - A Step-by-Step Guide to Performing GET Operations and Rendering Data on HTML Pages

Next: Part 5: Building a User-Friendly Todo App with Flask - Step-by-Step Guide to Update Todo and Category Items via PATCH Requests

Todo Series Parts: