 Hello, this is Christian. Welcome. In this video, we're going to do a little demo using something called Live Update. Now, Live Update is really how you can enter data in a text field, such as this one here, and at the same time, as soon as you type this letter, you want to also show this letter or this character or the word, whatever it is, in another field or another area on the same page, without refreshing the page. So I want to do that, and at the same time, this message box here contains some text, and the way I have it here is that I set it to a max length of 100 characters only, and I literally just put the numbered characters down here in this box here, in this tag here, and as soon as you add some data or some text in this field, we're going to subtract the number of characters from the 100. So it shows you how many characters you have left, right? And we do that using just pure JavaScript. Okay, so this is the form on the left side here. My form has a name and ID. I also make it so that my form cannot be submitted. I've returned false here. That means if I click submit, over here on the right side, you see nothing has been submitted. And then you see down here, I have two input fields. One is this line here. I have an ID of the name, or the name text, or TXT, for both name and ID. The text area here, same idea. I gave it a max length of 100 characters only. And then I have a span tag to display the number of characters remain as you type letters in this field. And the go button, of course, and the clear button here. Okay, so I'm going to show you how to do this like four different ways. And we'll see which one is more convenient or more, I guess, which is better for your use. So down here, I have a script tag. I'm going to go and the first method I want to do is using the traditional or the classical DOM functions, like the get element by D, query selector, get elements by tag name, and so on. Those are DOM functions. And using those functions, so really we would not rely on the form's object. Okay, so it goes so down here. We're going to go and create some variables. So we can say const TXT for that TXT field. So document.getElement by ID, and ID is really just TXT. That would point to that first input field. I also need the one for the message, so const msg. And this time we'll use the query selector. So just to show you that you can, right? And this one has an ID of pound sign msg. And then also target this span tag here. So const span, and this is going to be document.getElement. I'll just say a couple of ways, okay, by name, right? Because I have a name called count, okay? So we put count here. And it's going to be a list of tags. So we're going to grab the first one only. And that should grab that first field. All right, let's fix this. It's typed over here. Now then we are going to do an add event listener to the text field. So that when we type something over here, it's going to trigger an event. So we'll do like TXT add event listener. We're going to listen to an input event, okay? And then we're going to call the event function a anonymous function. Inside this function, then it's where we do the update. So what are we doing? We're going to pass the data from this text field to the message field. That's all I'm doing, right? So we'll say the msg.value. We'll get the value. It's going to be assigned with the txt.value. And that should be it. So let's save this and see what happens on the right side. If I type in a, you see that a shows up down there. So there you go. This is live update, right? Now I also want to do so that when I type something here, I'm going to count the number of characters in this field and subtract that, you know, from 100. So then the next line would be something like a count, the span, the inner text, use the inner text equals the, from the message.maxLength. There's a maxLength function. This will grab the variable or the value from your maxLength attribute here, which is 100. I want to subtract that and then subtract the msg of the value.length, the number of characters in this field. Okay, and it will update that live. So save this again. Let's go over here. You type in a and you can see that now it updates here and also updates down here. If I go ahead and delete, you know, my data up here, it updates right away. Now I also want to do so that when I type some field data down here, as you can see, it doesn't update, right? So you want to do that as well. Very simple. We already targeted msg here. So we can go down here and add another event for that tag. So I'm going to use the onInput method using the arrow function. Of course, you can do it in different ways. And here all I'm doing is really, I'm not going to update that content here, right? I'm just going to basically update this line. So I just copy this line and put it right here. And I think that's about it. Let's see. So save this file. And now if I go up and type in abc and defg and we go, it works just fine. The only thing is that every time we want to test something here, everything gets reset, which is okay. That's what I want. So this is the, you know, the classical way how to update live data using the down functions. Again, I'm not relying on the form at all. I can do this without the form at all. So that's one method. Now, the other way is I'm going to go through the forms object. As you know, every element inside your form can be controlled or not every element. There are about six, I think there are about six form elements that can be controlled and accessed directly through the form object. Okay. And so that's why I gave it a name just because I can access it. So the elements you'll be using primarily are the input, the text area, button, and something that you don't see here is the field set. And I think there's the output as well. Okay. So let's go do this time going through the form object. Okay. So by doing something kind of similar here, except I don't need this anymore. So I'm going to turn this off. And I'm going to using, so instead of this way, I'll keep those below. Let's do it. I'm going to get a constant F. F will be pointing to my form. So document.form. If you can do this way, forms gives you a list of forms. And it will have one, so you can do that. We'll grab you the first form, right? Which is okay. But if you know a name, if you have a name for your form, like I did here, I called it my form. If that's the case, then I can target the name directly by going like this. And that is going to be my form. Okay. And so now, once we have that, oh, I shouldn't have to leave my span. So let's put this back again. I'll use the get-and-by-d. It's called count. I'd use it differently before, but this is still be fine. So we got that. Okay, so now I'm going to also add an event. But this time I don't need to create the message and the text field. I'll go directly to the F object. So I can do something like this. So right here, to like F dot, add the name of that input. It's called txt. And then I can go and do, I'll use the un-input here. It's just nicer. And it's equal to an arrow function and then something like that. So inside here is the same as this, really. I could just put this inside here. So I would actually use this part here, but let me copy this and put it right in here. Okay, let me turn this off. Okay. And now the MSG, I don't have MSG anymore, right? So I access this MSG to the F object. MSG, right? F dot text. And again, this is F dot MSG, F dot text. And that's the reason why I cannot do the span. Okay, you can't because span is not a part of the form controls. So you cannot access those information directly using the object notation or through the array of the elements index. So this is where you, you don't have an option for this. So that's for the input. I'll do the same for the output, for the MSG. So here I'll just do this, F dot MSG. And then down here is the same, so F dot MSG and F dot MSG. Okay, so you can see that it's kind of similar except I'm going through the F object, the form object, instead of creating all those, you know, different tags, different objects. So save this and let's go here and try. And you can see it still works just fine, right? No problem. So that's by going through the F object. Now notice I have to do this span I mentioned here, right? Because span tag is not an input tag, it's not part of the form control. However, there is a thing you can do with this. You can replace the span and use the output tag. Okay, the output tag, that's what it's used for. Used to output data to this web page. So as you can see, it's an output. Now output is part of the form control groups. So that means you can access this data, the name of this output here through the dot count. So then I don't need this line here anymore. So line 86, 88 can be removed. And then here I will just do, instead of span, I would say this whole line here, it will be F dot count dot value, right? Because it has a value attribute. A little bit weird how this works. The value attribute here can actually, you know, get the data in here and replace the data inside here. Not the attribute actually on the, like you will see on the input tag. Okay, so I do that. And then down here also same. So F dot count dot value equals the other ones. And you will see that it should still work just as fine. So we'll go here, ABC and then the EF. Here we go. All right, so you can see that going through the form, you can make the code much shorter and you don't have to, you know, target each of these controls separately using separate objects. All right, so that is the second method. The third way you can do is you can go and use the elements event attribute, right? So I'm going to go and do something kind of, you know, interesting here. So you can see that this part here and this part is kind of same. The only difference is that if you call on the TXT, I would call the MSG message field to get the value. If I activate or click on the message field here, message box, I don't do this again. I'm just no point to do that. I mean, what I'm saying is that you don't have to do this again. It's redundant, right? Because I'm basically copying this to myself, to itself. It's not really, it'll work as you can see, right? It'll work, but you don't need to do that because it's redundant, okay? So instead of doing this way, you could remove that and then pull this into a function. So I'm going to go down here and create a function called, maybe let's do like a const update, okay? Error function and then inside here, I'm going to, you know, do this part here. So I'm going to copy this part and put it down here, right? And so this function will be calling the update, right? And same thing here. This will also be calling the update. Oops. Okay. But I need to get the value of the input text here, okay? So when I click on the input here, I should get the value from that element tag and so on. So of course, there are lots of ways. One way you can do is that, okay, I'm going to accept this object. This function will receive, let's just say, you know, two elements or just one element. The element itself, when I call this function up here, let me do a right-click and format this, okay? So when I call the input for the text, I'm going to pass this to this function, this text object, right? So whatever it is, I'm going to say, you know, what, f.txt, right? It will point to that element and then I'll use that element here and put that in here, okay? So this will be just the element. Whatever that element is, in this case, it's the txt. And then msg will be still pointing to that, okay? So let's save this and let's see if this still works. So go ahead and type in something over here. ABCs, you can see, still work just fine, except this far I didn't add an update yet, right? It does work because there's an error. The reason why is because now I did not pass anything to the message box here. So when I do something like this, there's no data here. It calls an error. So if you look at the console, you should see an error saying there's no such thing as, you know, there's no value defined on line 94, which is this guy right here, right? So then you have to do something about this variable. So what you can do is you can say, you can check to see if this variable is supplied or not. If you don't have this variable, then you don't need to do this line here, okay? So you can do something like this. You can say if there's an element, right, if it's true, then only then you will run this line. Otherwise, don't do anything, right? Just return all. And so now it should work. So if I type in A here, right, it works fine. If I type in def here, as you can see, it works just fine, okay? So now we got this function created down here. Then let's go into number three. Number three is by doing something directly to the attribute to the element. So I'm going to turn these off or delete these, okay? And we're going to call this function directly from the tag up here. So like the input tag, I'm going to go over here and I'm going to say on input is equal to the update function, okay? I'm going to pass this function, though, the element, which is this guy right here, the input. So this is just really this, okay? So when I get to this here, now where is this F coming from, right? So I remove the F here, but I assume I don't have it. What do I do? Well, you can pass that as one of the elements. Say I put it in the front here, okay, the first parameter. So up here, I will pass in the form object, which is, you know, document.myForm. Or since you're already inside the form control, the form group, you can just pass the name of this form directly here to this function, myForm, just like that. Okay, and let me put this in a separate line so you can see a little bit easier. Okay, so we pass in the myForm object, and then this refers to this attribute tag. So it goes down here, issue work just like before. Let's save this and do something here. As you can see, work just fine, right? No problem. This is not working yet because we haven't invoked that function yet. So likewise, you can go down here to the text area, and I'm going to do a new line here on input. It's equal to update, and this time I'm not passing anything to it, okay? I'll pass just the F, the F for the form, so it would do this. We'll update that. But since I'm not doing, you know, it copying itself to itself, I don't need the second parameter, and just like that. And let's see if it works. Okay, something is wrong. Let's see what happened here. I think I might have forgot something or something. Yeah, my bad. It's not F. It should be myForm, sorry. Yeah, it should be myForm. Okay, so here we go. All right, there we go. It works just fine, and so there it is. All right, so that's the third method. The last method I'm going to show you is you can do everything in line. So that means you don't even need all of these, okay? All this can be, you know, ignored. I don't need script at all, and you do everything here. Okay, so you're combining that script down here with the attribute here. So over here, instead of doing it this way, I'm going to do the code right in here. So again, as soon as long as your input or tags are inside your form control, you can access this name directly within the form. So when I do the input on the tag here, input on the input tag here, I'm going to change the value, or update the message value, that value equals to this value, right? Again, this points to this input tag. So if I save this over here, you can see it works just very, very beautifully, right? You can put this here, or you can actually put the name txt, it doesn't matter. Either one is fine. But since you're already here, just put this, okay? I would recommend that. And then I also want to do the countdown here, right? So you can put a semicolon here, and then do a, you know, the put next line here. You can see better, the count that value equals the msg.maxLength minus the msg.value.length, right? That's what we had earlier. So again, if you type it now, you see that this number also gets updated, okay? And then finally, the text area would be kind of the same. Remove that, and then we'll do just the count.value, is msg.maxLength minus msg. In this case, it would be just this. Yeah, you can use msg.value.length. And, you know, let's put here this, reference to this single tag. And so it should work beautifully, just you see here, okay? So there you go. I hope this is going to give you some ideas how you can update, you know, your sites using this little, some tips here to make code, you know, easier, simpler, may not be the best options, but, you know, I hope this gives you some idea. So good luck and have any questions. Feel free to post comments below. Thank you for watching. Have a good day. Bye.