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!!
Top comments (1)
elemForm.addEventListener('submit', (evento) => {
evento.preventDefault()
console.log(elemForm.value)
console.log(evento)
}
Still refreshes the page and no output is shown on console. I must be doing something wrong.