This blog emphasize to onsubmit event in JavaScript. When a user clicks on submit button of a form, JavaScript onsubmit event will call a function.

 


Invoking JavaScript function on form submission:


<form action="#" method="post" onsubmit="return ValidationEvent()">

In our example, we call ValidationEvent() function on form submission.

 


That will first validate the form fields and will return a boolean value either true or false. Depending upon the returned value the form will submit if it will be true.

JavaScript Function:


// Below Function Executes On Form Submit
function ValidationEvent() {
......
return true;   // Returns Value
}

 


Below is our complete code with download and live demo option 

 


HTML File: onsubmit_event.html

Here, we have created a simple HTML form with some fields, as user clicks submit button JavaScript code will execute.


<!DOCTYPE html>
<html>
<head>
<title>Javascript Onsubmit Event Example</title>
<link href="css/style.css" rel="stylesheet"> <!-- Include CSS File Here-->
<script src="js/onsubmit_event.js"></script>
</head>
<body>
<div class="container">
<div class="main">
<form action="#" method="post" onsubmit="return ValidationEvent()">
<h2>Javascript Onsubmit Event Example</h2>
<label>Name :</label>
<input id="name" name="name" placeholder="Name" type="text">
<label>Email :</label>
<input id="email" name="email" placeholder="Valid Email" type="text">
<label>Gender :</label>
<input id="male" name="gender" type="radio" value="Male">
<label>Male</label>
<input id="female" name="gender" type="radio" value="Female">
<label>Female</label>
<label>Contact No. :</label>
<input id="contact" name="contact" placeholder="Contact No." type="text">
<input type="submit" value="Submit">
<span>All type of validation will execute on OnSubmit Event.</span>
</form>
</div>
</div>
</body>
</html>

 

JavaScript File: onsubmit_event.js

Given below is our complete JavaScript code.


// Below Function Executes On Form Submit
function ValidationEvent() {
// Storing Field Values In Variables
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var contact = document.getElementById("contact").value;
// Regular Expression For Email
var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
// Conditions
if (name != '' && email != '' && contact != '') {
if (email.match(emailReg)) {
if (document.getElementById("male").checked || document.getElementById("female").checked) {
if (contact.length == 10) {
alert("All type of validation has done on OnSubmit event.");
return true;
} else {
alert("The Contact No. must be at least 10 digit long!");
return false;
}
} else {
alert("You must select gender.....!");
return false;
}
} else {
alert("Invalid Email Address...!!!");
return false;
}
} else {
alert("All fields are required.....!");
return false;
}
}

 

CSS File: style.css

Styling of HTML elements.


@import "http://fonts.googleapis.com/css?family=Raleway";
/* Above line is used for online google font */
h2 {
background-color:#FEFFED;
padding:30px 35px;
margin:-10px -50px;
text-align:center;
border-radius:10px 10px 0 0
}
span {
display:block;
margin-top:10px;
color:red
}
hr {
margin:10px -50px;
border:0;
border-top:1px solid #ccc;
margin-bottom:25px
}
div.container {
width:900px;
height:610px;
margin:35px auto;
font-family:'Raleway',sans-serif
}
div.main {
width:306px;
padding:10px 50px;
border:2px solid gray;
border-radius:10px;
font-family:raleway;
float:left
}
input[type=text] {
width:100%;
height:40px;
padding:5px;
margin-bottom:25px;
margin-top:5px;
border:2px solid #ccc;
color:#4f4f4f;
font-size:16px;
border-radius:5px
}
input[type=radio] {
margin:10px 10px 0
}
label {
color:#464646;
text-shadow:0 1px 0 #fff;
font-size:14px;
font-weight:700
}
input[type=submit] {
font-size:16px;
background:linear-gradient(#ffbc00 5%,#ffdd7f 100%);
border:1px solid #e5a900;
color:#4E4D4B;
font-weight:700;
cursor:pointer;
width:100%;
border-radius:5px;
padding:10px 0;
outline:none
}
input[type=submit]:hover {
background:linear-gradient(#ffdd7f 5%,#ffbc00 100%)
}

 

Conclusion:

In this way, we can call other JavaScript functions on form submission. Hope you might have understood it, keep reading our other blogs posts for more coding tricks.