From the course: JavaScript: Enhancing the DOM

Working with forms and input elements

From the course: JavaScript: Enhancing the DOM

Start my 1-month free trial Buy for my team

Working with forms and input elements

“

- [Maaike] Let's take the next step and move towards advanced DOM manipulation. Our first stop is dealing with forms and input elements. Forms are more important than you might realize. Much of the complex user interactions take place via form. Checking out from a store, signing up or logging in, adding a new post to some social media account, changing your profile picture, and a lot more, all of this is happening in forms. It pretty much where the real action happens. Handling form data using the DOM involves more than just accessing input values. It's about validating them, responding to the user input, passing it to some API, and creating a seamless form submission experience. Here, I'm having a basic form, but it's not doing anything yet. Let's go ahead and change that. This is our HTML. We have a form with id="registrationForm", and there's a submit button, two input fields, nameInput, and emailInput. Then at the bottom of the form, we have a paragraph with id="formFeedback" that is now empty. Once the DOM is loaded, I'm going to grab the form and the formFeedback. My next step is to add a submit event listener to the form, And I'm going to use the event object to prevent my page from refreshing, then I'm going to grab the name and the email, and then next, I'm going to do some basic validating, checking whether name or email might be missing. And if that's the case, I would go ahead. I'm going to write in the feedback that I need to fill out all the fields. And if that's not the case, I'm going to assume they were filled out correctly and I'm going to say, "Thank you for registering." So I'm not really doing anything yet here because I'm not sending it to an API or whatsoever, but I'm going to use the variable for their name. So let's move back to our form. Let's type my name and my email here, and I'm going to register. And as you can see, it says, "Thank you for registering, Maaike." But let's say I'm not filling out my email. It's going to say, "Please fill in all the fields." What's important to keep in mind is that all input fields, such as text, numbers, dates, colors, and more are coming through as text. Yes, numbers come through as text as well, which can be counterintuitive. I'm having a basic calculator here. Let's go ahead and write logic, but also let's do it wrong. All right, here you see the logic. I'm selecting a calculateButton and calculationResult. Then I'm going to add an event listener to the button. Whenever it's clicked, I'm going to get number1's and number2's value, and I'm going to calculate the result, then I'm going to show it in calculationResult. So first of all, when I just click it, you don't see anything. When I'm going to add some sort of value to it that is not going to be allowed such as hi and hi, you see, it's invalid input. But what happens if I do one and one, it should be two, but instead we get 11, and that is because we're doing string concatenation here. Remember when I said that all the input was text? Well, that's what's happening. It can add text with a plus sign, and that's why it does the concatenation, the plus sign as literal concatenation. So in order to change this, we need to parse it to a number. So for the result, I'm going to parse both number1 and number2 to an int. And now if I'm going to add number one and one, the result is two. There's actually a lot to forms in JavaScript, and I'm sure you'll discover a lot of great and quirky things as you go. But you should have enough knowledge right now to tackle problems that might occur. For now, keep in mind that forms are very important as they are your direct line to the user. Next, you'll learn how to manipulate lists.

Contents