JavaScript Submit Event Listeners for Dummies.
Tags: javascript, webdev, beginners, programming
Published: 2022-07-11 17:43:00

JavaScript has the ability to **listen** for an event in the browser that will let it know, for example, whether a user clicked on a button with their mouse or pressed a certain key on their keyboard. These "events" are known as event listeners. Here are a list of common event listeners: https://developer.mozilla.org/en-US/docs/Web/Events#standard_events

## The Submit Event
The submit event listener is one of the main event listeners developers will use in their work. This type of event listener will **listen** for when the user clicks the submit button on the webpage. For example:

HTML Code : ```
<body>
    <div>
        <form id="new-name">
            <label for="firstname">First Name: </label>
            <input type="text" name="firstname" id="new-firstname" />
            <label for="lastname">Last Name: </label>
            <input type="text" name="lastname" id="new-lastname" />
            <input type="submit" value="Create Name" />
        </form>
    </div>
    <br>
    <p>Full Name Here:</p>
    <p id="name-result"></p>
  </body> 
``` 
Let's say we have this form that is asking the user to input their first and last name. In JavaScript, we first want to grab the id/class from the html element we want to add the event listener to. In order to do that, we need to create a `const` that will be the html element we want to grab. In this case, we want to grab the form's id `new-name`: 
```const form = document.querySelector('#new-name')```

After we grab the `new-name` id and set it equal to a variable, we can then add our submit event listener to the form: 
```form.addEventListener('submit', () => {})```

Our next step is preventing the default feature of the submit event listener, which would refresh the webpage every time the submit button is clicked. In order to prevent this from occurring we write:
```
form.addEventListener('submit', (event) => {
event.preventDefault();
})
```
Now that our page is not refreshing every time we click our submit button, we can go ahead and get the values of the inputs we get when the user inputs their name. Just like how we grabbed the form id, we need to grab each inputs id and set them into new variables: 
```
const newFirstName = document.querySelector('#new-firstname').value;
const newLastName = document.querySelector('#new-lastname').value;
```
We are first grabbing the ids of the html element that the user inputs lie in. _Then_ we need to get the `.value` of the input in order to take the information the user types into the text box to store it for later use. We can then check to make sure we grabbed the correct values by console logging our new values:
```
console.log(newFirstName);
console.log(newLastName);
```
The text that the user inputs should now appear in the console when clicking the `Create Name` button. Perfect! Now, we can insert these input values into a `p` element with the id of `name-result` for the user to see:
```
const result = document.querySelector('#name-result');
result.innerText = `${newFirstName} ${newLastName}`;
```

 We use `.innerText` to change the text inside the `p` element. We then use string interpolation to input the input values the user submits. The name the user inputs should now be displayed on the webpage! Congratulations, you just made a submit event listener!!