HTMX + Flask: Modern Python Web Apps, Hold the JavaScript Transcripts
Chapter: Feature 1: Click-to-edit
Lecture: Concept: Creating or canceling the video creation
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Once we got the form on the page,
0:01
we want to be able to have users enter data into it with validation and then
0:06
either submit the form or decided to cancel it.
0:09
That was the final thing we did in our demo, it is to say,
0:12
you know, we changed our mind, just cancel it.
0:14
We're not actually interested in submitting this data.
0:16
So here we have our form.
0:17
This is a standard HTML form.
0:20
It's going to do a POST over two videos/add/{{cat_name}} and it has
0:24
some inputs here like the idea of the video,
0:27
the title, the author and so on.
0:29
And then it has a button that says create and we actually, in ours had type=submit
0:34
although it's not technically required.
0:36
So this submit button here, this create button is just going to submit the form
0:40
as usual. Like I said we could extend this demo, this idea further and have
0:45
it do some replaces on like a larger part of the page to kind of make
0:48
this more seamless. But I think this is good enough.
0:50
We're gonna submit this back and create it.
0:53
It'll save it in the database and then redirect it to the page.
0:56
Again, it's gonna reload by basically just doing a POST redirect pattern.
1:00
Going to reload this category in the browser.
1:03
On the other hand, if we decided that we don't want to do that,
1:06
we want to cancel it. We're going to do the same trick as we just
1:09
did for showing this form in the first place, we're going to say if you hit
1:13
cancel, we want to do a GET against videos/cancel/add/{{ cat_name }}
1:15
and pass along the category name.
1:18
And then we're going to say,
1:19
instead of hx-swamp,
1:21
we're gonna say hx-target, because it's not just swapping out the button's
1:25
HTML, like outerHTML or something.
1:27
We're going to swap out the thing that lives at that CSS selector ".video-form",
1:31
which is a form with class "video-form".
1:35
That's the whole thing. Right?
1:36
So let's cancel, and replaced this entire form that got put in the page back with
1:40
that add video hyperlink. And that's it.
1:44
That's how we either submit the form and create a new video or decide to cancel
1:47
it and take the form back off the page.