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, we want to be able to have users enter data into it with validation and then
0:07
either submit the form or decided to cancel it. That was the final thing we did in our demo, it is to say,
0:13
you know, we changed our mind, just cancel it. We're not actually interested in submitting this data. So here we have our form.
0:18
This is a standard HTML form. It's going to do a POST over two videos/add/{{cat_name}} and it has some inputs here like the idea of the video,
0:28
the title, the author and so on. And then it has a button that says create and we actually, in ours had type=submit
0:35
although it's not technically required. So this submit button here, this create button is just going to submit the form
0:41
as usual. Like I said we could extend this demo, this idea further and have it do some replaces on like a larger part of the page to kind of make
0:49
this more seamless. But I think this is good enough. We're gonna submit this back and create it.
0:54
It'll save it in the database and then redirect it to the page. Again, it's gonna reload by basically just doing a POST redirect pattern.
1:01
Going to reload this category in the browser. On the other hand, if we decided that we don't want to do that,
1:07
we want to cancel it. We're going to do the same trick as we just did for showing this form in the first place, we're going to say if you hit
1:14
cancel, we want to do a GET against videos/cancel/add/{{ cat_name }} and pass along the category name. And then we're going to say,
1:20
instead of hx-swamp, we're gonna say hx-target, because it's not just swapping out the button's HTML, like outerHTML or something.
1:28
We're going to swap out the thing that lives at that CSS selector ".video-form", which is a form with class "video-form".
1:36
That's the whole thing. Right? So let's cancel, and replaced this entire form that got put in the page back with
1:41
that add video hyperlink. And that's it. That's how we either submit the form and create a new video or decide to cancel
1:48
it and take the form back off the page.