Welcome folks today in this blog post we will be validating html5 form data and displaying it in browser using the onSubmit event in javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.html file and copy paste the following code
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Javascript onSubmit Event Example</title> </head> <body> <form id="form"> <label for="username">Username</label> <input type="text" name="" id="username" placeholder="Enter the Username"> <label for="password">Password</label> <input type="password" name="" id="password" placeholder="Enter the Password"> <button>Submit</button> </form> </body> </html> |
As you can see we are just making a simple html5 form in the above code in which there are two fields there which are username and password and also we have the labels also for these two fields for user. And then we have the button to submit the form. And also as you can see we have attached the id parameter to the form. And also to both the input fields (username and password). With the help of id we will be targeting these elements in javascript. So now if you open the index.html file inside the browser you will see the below result
Attaching the onSubmit Event Listener
Now guys we will be writing the javascript code in which we will first of all target the form element by using it’s id and then attaching the onSubmit event using addEventListener() method which is available in javascript.
|
1 2 3 4 5 |
let form = document.getElementById('form') form.addEventListener('submit',(e) => { }) |
As you can see we have attached the submit event handler to the form. When the form submits this event will automatically be called and inside this event the variable e will be automatically passed. It contains various properties about the event.
|
1 2 3 4 5 |
e.preventDefault() let username = document.getElementById('username').value let password = document.getElementById('password').value |
Now we are first of all preventing the form from auto submitting using the e.preventDefault() method. And then we are targeting both the input fields using it’s id and getting the value.
|
1 2 3 4 5 6 |
if(username == "" || password == ""){ alert("Please enter all the fields") } else{ } |
As you can see now in the above code we are first of all comparing the values of the username and password if they are empty we will be showing an alert message that please enter all the fields.
Displaying the User Entered Values in Browser
Now guys we will be showing the values entered in the user input fields inside the browser. For that we need to attach a DOM Element which can be a simple div element having the id called result as shown below.
|
1 |
<div id="result"></div> |
Here we will be showing the user entered values of username and password. For this we need to write some dynamic javascript code as shown below
|
1 2 3 4 |
document.getElementById('result').innerHTML = ` <p>The Username is: ${username}</p> <p>The Password is: ${password}</p> ` |
As you can see we are manipulating the innerHTML property of the targeted div element inside the DOM. And here we are printing the dynamic values that we got from the user which is username and password. For this we are using the template string where we are rendering the variables using the ${variable} syntax. Now if you submit the form then the values will be shown in the browser.
Other Ways of Attaching onSubmit Event Listener
There can be other ways too to attach the onsubmit event listener to the form. The various ways are as follows
- Using onsubmit Attribute: We can even directly attach the onsubmit attribute to the HTML Form Element present inside the DOM as shown below
|
1 2 3 |
<form onsubmit="processForm()"> </form> |
As you can see we have attached a custom event attribute which is called onsubmit and the value is the actual function which will be called once the form submitted by the user. The name of the function can be anything. So in javascript code we need to define this function as shown below
|
1 2 3 |
function processForm(){ } |
Full Source Code
Wrapping the blog post this is the full source code of the index.html file with javascript code
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Javascript onSubmit Event Example</title> </head> <body> <form id="form"> <label for="username">Username</label> <input type="text" name="" id="username" placeholder="Enter the Username"> <label for="password">Password</label> <input type="password" name="" id="password" placeholder="Enter the Password"> <button>Submit</button> <div id="result"></div> </form> </body> <script> let form = document.getElementById('form') form.addEventListener('submit',(e) => { e.preventDefault() let username = document.getElementById('username').value let password = document.getElementById('password').value if(username == "" || password == ""){ alert("Please enter all the fields") } else{ document.getElementById('result').innerHTML = ` <p>The Username is: ${username}</p> <p>The Password is: ${password}</p> ` } }) </script> </html> |
