A submit event is a popular aspect in the world of coding and creating websites and applications. They are specifically useful in terms of creating websites and applications for businesses. But the question is, how do you successfully add an event listener for a form? What is the workflow? How can I better understand what I am trying to achieve? The best way to learn is to understand and comprehend first, if you don’t understand what you are learning than it becomes memorization instead of comprehension. Learning is not about memorization because memorization can be temporary rather than becoming common knowledge. Break down everything you are learning and translate it in a way for you to better understand using scenarios to get a better grasp of the information.
To better understand and follow along you will need to open index.html to open your project in the browser and navigate the Developer Tools, once you get to Developer Tools go to “Elements”.
Target the Form
The first step is to target the form by basically telling the computer where you want to place the event listener that you are wanting to add. You can achieve this by creating a variable and setting the variable equal to the form’s HTML element. For instance, I am creating a website that contains a submission form to adopt a dog. So, I am targeting the adoption form which is where I will apply the event listener.
const adoptionForm = document.getElementById('adoption-form')
Create the Event Listener
Creating the event listener is the easiest part, when formatted correctly. The command includes the target variable, the event, and the listener. The listener is the action that the computer will listen for to trigger an action. Specifically for forms the listener is “submit”, but it can also be “click”, “mouseover”, “key down” and so on. The event will need to be a call back function that will act as a cause-and-effect event once the listener is triggered. So, once we submit our form what do we want to happen? To keep everything shorter and simple it may be easier to call the function rather than type out the function just in case you need to call it again elsewhere.
adoptionForm.addEventListener('submit', formEvent)
The Form Event
As mentioned above, the event is an action that will take place after the listener is triggered which needs to be in the form of a call back function. For example, if I want to have the information that was submitted into my form displayed on the DOM, I will need to create a call back for that specific action.
In order to display a new item on the DOM we need to create a new element on our HTML. In this case I am creating three new elements, name input, dog name input and adoption statement.
const nameInput = document.createElement('p')
const dognameInput = document.createElement('p')
const adoptionStatement = document.createElement('p')
Then we need to target the location on the form that we are interested in and make it a variable. Dog Name and name are the HTML elements located on the form that will be submitted.
const dogName = document.getElementById('dogName')
const name = document.getElementById('name')
But once we do that, we must be more specific and tell the computer that we are looking for the input value of the target, not just the target itself, we do that by linking the values of dog name and name to equal the dog’s name input and the name input’s “inner Text”.
I also indicated what I wanted my adoption statement to say using "interpolation”. Interpolation is a way to input a variable into a string to form a sentence or a statement. In order to create my statement, I wrapped the name input inner text and the dog’s name input inner text in ${} to fill the spaces with what is placed in the form upon submission.
dognameInput.innerText = dogName.value
nameInput.innerText = name.value
adoptionStatement.innerText = `${nameInput.innerText} has adopted ${dognameInput.innerText}!`
Finally, we need to attach the information to a specific location on the DOM using append child. I created a variable to better identify where I want the adoption statement to appear on the DOM, then appended the child (adoption statement) to the parent (form input container).
const formInputContainer = document.getElementById('adopted-dogs')
formInputContainer.appendChild(adoptionStatement)
Prevent Default
All forms have a default setting, which is to automatically refresh when the form is submitted rather than saving the information that was submitted and displaying it on the DOM. To prevent the default, use the following commands.
event.preventDefault()
Using this workflow will successfully produce a working form event listener and will display the information on the DOM once it has been submitted.
Put it All Together!
The full code should look something like this. For example, the code will display “Ashley has adopted Jason!” after Ashley submits the form saying she is adopting a dog named Jason.
const adoptionForm = document.getElementById('adoption-form')
const formInputContainer = document.getElementById('adopted-dogs')
adoptionForm.addEventListener('submit', formEvent)
function formEvent(event) {
event.preventDefault()
const nameInput = document.createElement('p')
const dognameInput = document.createElement('p')
const adoptionStatement = document.createElement('p')
const dogName = document.getElementById('dogName')
const name = document.getElementById('name')
dognameInput.innerText = dogName.value
nameInput.innerText = name.value
adoptionStatement.innerText = `${nameInput.innerText} has adopted ${dognameInput.innerText}!`
formInputContainer.appendChild(adoptionStatement)
}