When I was first learning how to code a form in my bootcamp, I honestly just pattern matched. I would copy exactly what I saw in my class examples and hope that someday I would understand what I was doing. Why was I preventing default? OR calling the event listener on the form instead of on the input? And how does the submit input magically become a button on the page? Where did the term "target" and "value" come from when retrieving the information submitted? These are all things that after a few practice runs and some internet rabbit-holing, I finally figured out.
First of all, this whole prevent default situation comes from an action attribute that is inherent to form elements. This action element specifies which URL you'd like the form data to be submitted to, which, by default, is the current URL on the form's page. When this action attribute is fired it refreshes the current URL (or navigates to whichever URL is specified in the action attribute). If you are just trying to get the info from your form to show up on the page, and you don't add your the preventDefault() method, the page will refresh and your information will disappear from the page. So, to have our information persist on the page, we need to prevent this default action with preventDefault(). There are a few more events that use preventDefault(), but for the sake of this blog, I won't get too far into it!
I was also confused about why we needed to use "target" and "value" in the form submission, instead of just calling the event listener on the input itself. Imagine you have a super long form with many different inputs, then you'd have to call an event listener on every single input inside of that form, as well as an event listeners on the submit button. By calling the event listener on the form itself, it encompasses everything in that form, including the submit button! Way easier. But then we need to get to the individual inputs on the form... that's when "target" comes into play. Since the form now has an event listener added to it, we name the event whatever we want (typically "e" or "event" is standard, but you could use "form" or "submit" or "potato" if you so desired, it doesn't matter). But from that event, we need to target the individual inputs from the form. That's where target comes into play. It is targeting the input where a user is going to put in some sort of value. So now we have e.target, but we need to tell Javascript what we want to target. Here is where we grab the input id and chain it onto our event listener. So now we have: e.target.inputId to grab the whole line of the input BUT how do we grab from that line of input what the user types in? This is where "value" comes into play. We are trying to get the value of the text submitted in the form to post onto the page. So our total line chain to grab the text inputted by a user will then be: e.target.inputId.value. And there we get our user input!
Why do we have an instead of , considering that the submit button IS TECHNICALLY A BUTTON. Technically, you could use both in the same place, but elements with a tag are a lot more customizable, where as tags with the type="submit" are limited in their ability to customize. I think as a beginner, you should stick with using the rather than a button for the ease of use, and how it's built into javascript as a submit button already. Once you get more comfortable with styling buttons, then you can throw a your own customized button in there.
So that's my vanilla JS form submission rabbit-hole! I hope I could clear up any confusion beginners may have with creating a Javascript Form. Happy coding!
Top comments (0)