WEBVTT 0 00:01.160 --> 00:03.410 Oh, it's getting cold here, my dear students. 1 00:03.410 --> 00:05.010 It is getting freezing here. 2 00:05.030 --> 00:08.240 Winter is approaching and I'm not a man of winter anyway. 3 00:08.900 --> 00:09.350 Okay. 4 00:09.350 --> 00:10.010 What I want to do. 5 00:10.040 --> 00:13.310 Well, let's assume you're buying goods and you need it shipped, right? 6 00:13.310 --> 00:17.870 So you get asked for your delivery address and a billing address. 7 00:17.870 --> 00:22.670 So the first thing I've done is you can see the billing address is the same as the delivery address 8 00:22.670 --> 00:29.300 by default, it's checked by default when the page first loads. And of course the user can input their 9 00:29.300 --> 00:30.560 name and address. 10 00:31.530 --> 00:35.910 They cannot do so for the billing address because it is disabled. 11 00:35.940 --> 00:41.010 Oh, well, actually, the other thing is let's just say name is Wally and the address is 12a 12 00:41.010 --> 00:43.650 Lawn Avenue. 13 00:43.680 --> 00:50.520 If the user clicks submit, you can see in the URL bar, only the name and address in the first box has 14 00:50.520 --> 00:51.670 been submitted to the server. 15 00:51.690 --> 00:52.470 Nothing else. 16 00:52.470 --> 00:56.220 But intuitively, what's going to happen when the user unchecks this checkbox? 17 00:56.970 --> 00:57.530 That's right. 18 00:57.540 --> 01:00.800 I'd want these inputs here to 19 01:00.810 --> 01:02.460 suddenly now become enabled. 20 01:02.460 --> 01:08.120 And then if the user fills them out and click submit, I want all that data to be submitted to the server. 21 01:08.130 --> 01:11.580 Right now it's not working because I want to give you this file. 22 01:11.580 --> 01:17.310 This is like the starting point, and I'll run through the HTML now with you quickly so you understand 23 01:17.310 --> 01:18.210 how I built it. 24 01:18.210 --> 01:19.560 I just didn't want to do it from scratch. 25 01:19.560 --> 01:24.420 We've done a lot of HTML building in this course and I think you probably just going to get bored watching 26 01:24.420 --> 01:24.720 me. 27 01:24.720 --> 01:30.960 You know, you can already tell that I've set this up with a fieldset, a legend, and then just inputs with type 28 01:30.960 --> 01:32.570 of text, right? 29 01:32.580 --> 01:33.810 Very, very intuitive. 30 01:33.810 --> 01:35.340 I've put the required attribute on them 31 01:35.340 --> 01:39.510 so if the user does try and click submit, the browser won't allow us to do so. 32 01:39.540 --> 01:41.190 Don't get lost in all the detail. 33 01:42.010 --> 01:50.140 All I'm trying to convey to you is how we can use the enabled and disabled pseudo classes to style our 34 01:50.140 --> 01:50.920 forms. 35 01:50.950 --> 01:55.030 Here we're using them, of course, when it comes to billing address, and it's a very practical and 36 01:55.030 --> 01:55.900 useful scenario. 37 01:55.900 --> 02:01.330 But before I get into a bit of JavaScript, I'm going to use JavaScript here to listen to an event, 38 02:01.990 --> 02:05.140 every time this toggle has been checked or unchecked. 39 02:05.170 --> 02:12.730 Every time there's a change, I want to listen for that event and then I want to now toggle the disabled 40 02:12.730 --> 02:17.110 attributes on and off, depending on the check state of this checkbox. 41 02:17.110 --> 02:17.490 Right? 42 02:17.500 --> 02:18.220 That's what I want to do. 43 02:18.220 --> 02:24.220 But before I use JavaScript to do that, let me just explain how I coded this up in HTML. 44 02:24.250 --> 02:25.520 It's very, very simple. 45 02:25.540 --> 02:26.620 So here's CSS. 46 02:26.620 --> 02:28.150 I won't go through CSS with you. 47 02:28.150 --> 02:33.610 I'll leave my comments in here so you can see how I styled it all up, but I want to discuss the HTML. 48 02:33.640 --> 02:37.060 The first thing I did is I wrapped everything within a form, right? 49 02:37.060 --> 02:38.020 We're dealing with forms. 50 02:38.020 --> 02:39.670 This course is all about forms. 51 02:39.670 --> 02:42.680 And then I have two main sections. 52 02:42.680 --> 02:48.230 I've got the delivery address and we wrapped that in a fieldset with a legend, and billing address, and 53 02:48.230 --> 02:50.630 we wrapped that within a fieldset and a legend. 54 02:50.870 --> 02:53.240 Then what I did was I've got two inputs for each. 55 02:53.270 --> 02:54.830 I wrapped each within a div. 56 02:54.860 --> 02:57.140 If you've seen this, you know this structure before. 57 02:57.770 --> 03:01.940 Of course, each form control has its label and input. 58 03:02.980 --> 03:06.310 And in order to make it a required field ... 59 03:06.610 --> 03:07.270 that's right ... 60 03:07.390 --> 03:13.820 I put the required attribute on each input element. And the billing address was rather similar. 61 03:13.840 --> 03:14.350 Right. 62 03:14.350 --> 03:23.170 I put the required attribute on each input element. In order to make that checkbox checked by default, 63 03:23.200 --> 03:24.340 what do we have to do? 64 03:24.820 --> 03:28.570 Remember if I refresh this page, it's checked by default. 65 03:30.300 --> 03:36.270 Well, in order to do that, we just put the checked attribute on the actual input of type checkbox. 66 03:36.300 --> 03:38.280 It really is that simple. 67 03:38.820 --> 03:41.760 Then, you'll notice, 68 03:43.160 --> 03:47.660 that I used the disabled attribute on the two inputs. 69 03:49.400 --> 03:54.290 You might be thinking, "Clyde, why didn't you put disabled on the actual, you know, entire 70 03:54.290 --> 03:54.530 fieldset 71 03:54.530 --> 03:57.950 for example". Why didn't I, up here on the fieldset, 72 03:59.240 --> 04:00.440 put disabled on here. 73 04:03.260 --> 04:04.130 Why is that? 74 04:04.160 --> 04:05.360 Can you figure it out? 75 04:05.810 --> 04:09.800 Well, if I do that, everything will be disabled, including the checkbox. 76 04:10.130 --> 04:14.030 So the user will never be able to toggle that checkbox. 77 04:14.570 --> 04:16.460 And that's the reason why I don't want it 78 04:16.460 --> 04:18.320 on the actual fieldset itself. 79 04:18.320 --> 04:22.970 I only wanted it on, you know, these two inputs, name and address. 80 04:23.390 --> 04:26.120 And this still allows this to be enabled. 81 04:27.300 --> 04:30.390 And I gave this fieldset an ID of billing. 82 04:30.960 --> 04:35.530 And if I scroll up, you'll notice that the first fieldset - the delivery address - 83 04:35.550 --> 04:39.630 I didn't have to give an ID because we're not even going to be targeting that with CSS at all. 84 04:40.200 --> 04:42.240 I'm sorry, with, with JavaScript. 85 04:42.240 --> 04:46.830 So that's why when it comes to billing address, I've got an ID on this fieldset of billing. 86 04:47.100 --> 04:51.060 And then of course, very simply we've got our button of type submit. 87 04:51.150 --> 04:55.680 We've got script tags and this is where I want to include our JavaScript. 88 04:56.570 --> 04:57.650 So I've put a comment here. 89 04:57.650 --> 05:00.050 I haven't wrote or written any JavaScript. 90 05:00.080 --> 05:01.250 Maybe you can give it a go. 91 05:01.280 --> 05:04.850 We've done a lot of it in this course, but if you don't know how to do it, don't stress. 92 05:04.850 --> 05:07.910 I'll walk through exactly what we do, in the next lecture. 93 05:07.910 --> 05:12.440 But just remember what I'm going to be doing is I'm going to be doing two things. 94 05:12.650 --> 05:16.850 And in order to do those two things with JavaScript, I'm going to be listening for the "change" event 95 05:16.850 --> 05:21.950 on that checkbox. Because every time it's checked, a change event will be fired and I'm going to be 96 05:21.950 --> 05:22.760 listening for that event. 97 05:22.760 --> 05:24.890 And when that event happens, what do we want to happen? 98 05:24.890 --> 05:26.150 Well, we want two things to happen. 99 05:26.150 --> 05:32.660 One, we want that disabled attribute on each of those inputs to be toggled on and off. 100 05:32.840 --> 05:41.690 So when the user first checks that, or takes that check away, we want these disabled attributes, those 101 05:41.690 --> 05:44.510 two there, we want them to disappear. 102 05:44.510 --> 05:46.550 We want them to be removed. 103 05:46.550 --> 05:47.990 So that's the first thing we want to do. 104 05:47.990 --> 05:52.640 The second thing I want to do is I want to change the styling. 105 05:52.640 --> 06:00.920 And you'll notice on here for the label, we've put a class of disabled-label. 106 06:00.920 --> 06:02.840 Can you see the class disabled-label? 107 06:03.380 --> 06:05.660 Disabled-label ... it rhymes 🤣. 108 06:06.170 --> 06:06.500 All right. 109 06:06.500 --> 06:13.970 But if I scroll up in our CSS, can we see we've got this disabled-label - we've got a color of gray. 110 06:16.290 --> 06:18.870 So we want to affect that styling too. 111 06:18.900 --> 06:20.860 So those are two things we want to do, right? 112 06:20.880 --> 06:26.790 We want to remove that disabled-label styling and we want to remove the disabled attribute. 113 06:26.790 --> 06:30.500 And of course, if the user then checks it again, we want to add those back. 114 06:30.510 --> 06:31.860 So it's kind of like a toggle. 115 06:31.860 --> 06:36.660 We want to keep putting it back and and removing it every time that change event is fired. 116 06:37.020 --> 06:40.740 I know it can be a lot to take in. Try and give it a go. 117 06:40.770 --> 06:43.500 The most important thing, though, is that you understand the HTML. 118 06:43.530 --> 06:44.610 That's the most important thing. 119 06:44.640 --> 06:45.990 Do you understand the structure? 120 06:46.020 --> 06:49.530 Do you understand why or how we've disabled certain inputs? 121 06:49.560 --> 06:50.700 That's the most important. 122 06:50.730 --> 06:51.510 Take a break. 123 06:52.020 --> 06:53.130 Jump up and down. 124 06:53.130 --> 06:57.390 Pat yourself on the back, and I'll see you in the next lecture. 125 06:57.390 --> 06:59.520 We will code up this JavaScript together. 126 07:00.300 --> 07:00.930 Adios.