Dark Modal: Submit Button

[00:00:00]
>> There's probably one more thing we want to make sure we do so that the idea is that when the user clicks on that close button, the form gets submitted which the browser knows means we want to close the dialogue. So, if we look at our little example here, not all buttons are created equal, right, buttons can do different things.

[00:00:29]
And then the types of buttons, let the browser know what it should do when somebody clicks this button. So one way we can tell the browser what behavior we want for this button is using the type. Are there other ways we could tell the browser that we want, let's say, when someone clicks on this button to close the dialogue?

[00:01:03]
We could mess with that, but keep in mind that right now we are in the world of the form, and we're making this form to hopefully be useful for other forms that may or may not be in dialogs. Forms that might just be part of your regular webpage and not stop everything else, that article that you were reading by blurring out the background, etc.

[00:01:31]
So, in this case, we would not be able to know that, like, since the user's passing in the type of this form, we wouldn't be able to know that we're gonna have a dialogue here and we're gonna call close on it. So why don't we just use the type submit?

[00:01:49]
Also because you know what, and this just, I think, I probably should have mentioned at the very beginning and should mention very frequently, is you can't mess up the JavaScript if there isn't any JavaScript. So, [LAUGH] the fewer times that we enter the realm of JavaScript and the more that we can use the very powerful features of HTML, CSS, all these other things, the less JavaScript we can have, the better.

[00:02:19]
In general, that's sort of maybe a controversial statement, but I don't know. I think most of the web is on the same page about, let's try to use the underlying capabilities. So why don't we just make this a submit button, and then if the user wants to do something else with it, they can figure that out in the user land code of where they're instantiating this form object.

[00:02:48]
So, similar to our form element, getting whatever type the user parsed in, we can effect the button element.
>> Can we also do that when we create the button element?
>> We could also do that when we create the button element. I'm not sure if we can run arbitrary code in the class declaration.

[00:03:15]
>> I meant in the create element call, can we parse-
>> In the create element call, that's a good question, I understood what you were asking is to be like, is there some other thing that we can pass in here that goes here? And that's actually a good question, which we can ask MDN.

[00:03:34]
Create element is the name of the thing that we're trying to figure out, what is the API of this function? Okay, so it does have an overloaded signature that accepts some options, now let's see what those objects are. It's [LAUGH] cool, so I'm not sure gonna accomplish the goal that we wish it would accomplish of just, let's say, parsing some attributes to this element.

[00:04:02]
We can use it to define custom elements, so that's fun, but I don't think that it's gonna work for our type attribute based on this documentation, which, again, is not an infallible resource. But what we can do probably is chain the call to set attribute here because this is going to evaluate to a HTML button element.

[00:04:29]
And then we should be able to call set attribute type submit. So this whole thing returns an HTML button element, but this whole thing returns undefined, our best friend. So, excellent catch that probably this isn't what we want here because a reference to undefined is not something that's very hard to come by.

[00:04:56]
They're sort of a dime a dozen, these undefineds, so, [LAUGH] we can do this in our constructor, makes more sense. And we're gonna get to another tricksy part of this in a moment, where we can use our closeButton reference to get that HTML element, and then make our call to setAttribute, all right.

[00:05:24]
>> Do we wanna change its content here, too?
>> That is a good question, right? So what is this button gonna look like right now? It's gonna be, so if we were to write it out, it's gonna be a button, it's gonna have type, submit. And that's all, so we probably want our users to have a little bit better experience than just seeing like an empty button in front of them, how can we fix it?

[00:06:03]
>> We can set the text content.
>> We can set the text content. Yeah, so we can do this closeButton, textContent, and then, I mean, we could parametrize this, let the user parse in something, but basically this is called a close button because it's gonna be for closing, so we can just sort of decide it's gonna be called closed.