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.