Oh, it's getting cold here, my dear students.
It is getting freezing here.
Winter is approaching and I'm not a man of winter anyway.
Okay.
What I want to do.
Well, let's assume you're buying goods and you need it shipped, right?
So you get asked for your delivery address and a billing address.
So the first thing I've done is you can see the billing address is the same as the delivery address
by default, it's checked by default when the page first loads. And of course the user can input their
name and address.
They cannot do so for the billing address because it is disabled.
Oh, well, actually, the other thing is let's just say name is Wally and the address is 12a
Lawn Avenue.
If the user clicks submit, you can see in the URL bar, only the name and address in the first box has
been submitted to the server.
Nothing else.
But intuitively, what's going to happen when the user unchecks this checkbox?
That's right.
I'd want these inputs here to
suddenly now become enabled.
And then if the user fills them out and click submit, I want all that data to be submitted to the server.
Right now it's not working because I want to give you this file.
This is like the starting point, and I'll run through the HTML now with you quickly so you understand
how I built it.
I just didn't want to do it from scratch.
We've done a lot of HTML building in this course and I think you probably just going to get bored watching
me.
You know, you can already tell that I've set this up with a fieldset, a legend, and then just inputs with type
of text, right?
Very, very intuitive.
I've put the required attribute on them
so if the user does try and click submit, the browser won't allow us to do so.
Don't get lost in all the detail.
All I'm trying to convey to you is how we can use the enabled and disabled pseudo classes to style our
forms.
Here we're using them, of course, when it comes to billing address, and it's a very practical and
useful scenario.
But before I get into a bit of JavaScript, I'm going to use JavaScript here to listen to an event,
every time this toggle has been checked or unchecked.
Every time there's a change, I want to listen for that event and then I want to now toggle the disabled
attributes on and off, depending on the check state of this checkbox.
Right?
That's what I want to do.
But before I use JavaScript to do that, let me just explain how I coded this up in HTML.
It's very, very simple.
So here's CSS.
I won't go through CSS with you.
I'll leave my comments in here so you can see how I styled it all up, but I want to discuss the HTML.
The first thing I did is I wrapped everything within a form, right?
We're dealing with forms.
This course is all about forms.
And then I have two main sections.
I've got the delivery address and we wrapped that in a fieldset with a legend, and billing address, and
we wrapped that within a fieldset and a legend.
Then what I did was I've got two inputs for each.
I wrapped each within a div.
If you've seen this, you know this structure before.
Of course, each form control has its label and input.
And in order to make it a required field ...
that's right ...
I put the required attribute on each input element. And the billing address was rather similar.
Right.
I put the required attribute on each input element. In order to make that checkbox checked by default,
what do we have to do?
Remember if I refresh this page, it's checked by default.
Well, in order to do that, we just put the checked attribute on the actual input of type checkbox.
It really is that simple.
Then, you'll notice,
that I used the disabled attribute on the two inputs.
You might be thinking, "Clyde, why didn't you put disabled on the actual, you know, entire
fieldset
for example". Why didn't I, up here on the fieldset,
put disabled on here.
Why is that?
Can you figure it out?
Well, if I do that, everything will be disabled, including the checkbox.
So the user will never be able to toggle that checkbox.
And that's the reason why I don't want it
on the actual fieldset itself.
I only wanted it on, you know, these two inputs, name and address.
And this still allows this to be enabled.
And I gave this fieldset an ID of billing.
And if I scroll up, you'll notice that the first fieldset - the delivery address -
I didn't have to give an ID because we're not even going to be targeting that with CSS at all.
I'm sorry, with, with JavaScript.
So that's why when it comes to billing address, I've got an ID on this fieldset of billing.
And then of course, very simply we've got our button of type submit.
We've got script tags and this is where I want to include our JavaScript.
So I've put a comment here.
I haven't wrote or written any JavaScript.
Maybe you can give it a go.
We've done a lot of it in this course, but if you don't know how to do it, don't stress.
I'll walk through exactly what we do, in the next lecture.
But just remember what I'm going to be doing is I'm going to be doing two things.
And in order to do those two things with JavaScript, I'm going to be listening for the "change" event
on that checkbox. Because every time it's checked, a change event will be fired and I'm going to be
listening for that event.
And when that event happens, what do we want to happen?
Well, we want two things to happen.
One, we want that disabled attribute on each of those inputs to be toggled on and off.
So when the user first checks that, or takes that check away, we want these disabled attributes, those
two there, we want them to disappear.
We want them to be removed.
So that's the first thing we want to do.
The second thing I want to do is I want to change the styling.
And you'll notice on here for the label, we've put a class of disabled-label.
Can you see the class disabled-label?
Disabled-label ... it rhymes ðŸ¤£.
All right.
But if I scroll up in our CSS, can we see we've got this disabled-label - we've got a color of gray.
So we want to affect that styling too.
So those are two things we want to do, right?
We want to remove that disabled-label styling and we want to remove the disabled attribute.
And of course, if the user then checks it again, we want to add those back.
So it's kind of like a toggle.
We want to keep putting it back and and removing it every time that change event is fired.
I know it can be a lot to take in. Try and give it a go.
The most important thing, though, is that you understand the HTML.
That's the most important thing.
Do you understand the structure?
Do you understand why or how we've disabled certain inputs?
That's the most important.
Take a break.
Jump up and down.
Pat yourself on the back, and I'll see you in the next lecture.
We will code up this JavaScript together.
Adios.