Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Javascript OnSubmit Event Example to Validate HTML5 Form User Data & Display it in Browser

Posted on November 3, 2022

 

 

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.

 

 

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

 

 

  1. 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

 

 

JavaScript
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>

 

Recent Posts

  • Android Java Project to Capture Image From Camera & Save it inside Gallery
  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Android Java Project to Download Youtube Video Thumbnail From URL & Save it inside SD Card
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme