Introduction to JavaScript onsubmit
The JavaScript onsubmit is one of the event handling function used for performing the operations in web based applications. It is used to validate the datas and whatever the client user is requested to the server it is to be validated and mainly used in the html form controls also it is used to set the html contents of the some input like hidden elements is to be validated before the request is submitting to the server side. If suppose the user is forget to submit the required fields in the form they can be cancelled the submission within the onsubmit event.
Syntax:
Every event handling function must have their own syntax and rules in the JavaScript code.
<html>
<head>
<script>
function functionName()
{
--some javascript logic codes—
}
</script>
</head>
<body>
<form id="" method="" action="" onsubmit="functionName()">
---some html input tags and elements---
</form>
</body>
</html>The above code is the basic syntax for using onsubmit().
How onsubmit Event work in JavaScript?
The onsubmit event is performed the triggers is based upon the submit function whenever the client user request in the form-wise data is submitted to the server or the client request is supposed to be cancelled or aborted the submission of the datas in JavaScript. The method form.onsubmit() allowed to be initiated in the form datas which is to be sent it as client request from the JavaScript code we can also used it in to the web application creation and send the user datas to the servers which helps in the our own html forms. Basically the two ways to submit the html forms to the servers first one when the user is clicked to the submit button if the input type is in either submit form text format or image format the next one is we want to add the datas in the input field in the web page using enter key with the help of keyboard.
But both the type of actions is to be submitted the events on the form based to the server side is the actual result of the web based applications. The events also performed with the help of event handler mechanism is to be checked the datas and if suppose the form contains some errors if there are errors we can call and used in the function called event.preventDefault() method with the help of these method the user data is not sent to the server side if the data contains some errors. Whenever the form based applications we should enter the input field as text format and press the enter button to continue the next label fields in the text boxes or we want to perform the next button events like onsubmit, submit functions in the html with JavaScript.
We can call the submitted form datas through manually like form.submit() then the submit event is not generated. The onsubmit attribute provides the script datas to executed whenever the submit event is occurred so it does not submit the datas to the server with the help of submit() function it will be postponed to the server side.
Examples of JavaScript onsubmit
Given below are the examples of JavaScript onsubmit:
Example #1
Code:
<!DOCTYPEhtml>
<html>
<body>
<p>Welcome To My Domain.</p>
<p>Have a Nice Day.</p>
<form id="first" action="first.jsp">
Enter your name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
document.getElementById("first").onsubmit = function() {demo()};
functiondemo() {
alert("The form was submitted successfully");
}
</script>
</body>
</html>Output:
Example #2
Code:
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Registeration form</title>
</head>
<body onload="document.registration.userid.focus();">
<h1>Welcome To My Domain</h1>
Have a Nice day.
<form name='reg' onsubmit="return demo();">
<label for="user">UserName:</label>
<input type="text" name="user" size="13" /><br>
<label for="pass">Password:</label>
<input type="password" name="pass" size="13" /><br>
<label for="add">Address:</label>
<input type="text" name="add" size="53" /><br>
<label for="count">Country:</label>
<select name="count">
<option selected="" value="Default">(Please select a country with below options)</option>
<option value="In">India</option>
<option value="USA">America</option>
<option value="ch">China</option>
<option value="JN">Japan</option>
<option value="PK">Pakistan</option>
</select><br>
<label for="email">Email:</label>
<input type="text" name="email" size="53" /><br>
<label id="gend">Gender:</label>
<input type="radio" name="m" value="Male" /><span>Male</span>
<input type="radio" name="f" value="Female" /><span>Female</span><br>
<input type="submit" name="submit" value="Submit" />
</form>
<script>
function demo()
{
var username = document.registration.user;
var pass = document.registration.pass;
var address = document.registration.add;
var country = document.registration.count;
var emails = document.registration.email;
var male = document.registration.m;
var female = document.registration.fsex; if(user_validation(username,6,13))
{
if(pass_validation(pass,8,11))
{
if(numeric(address))
{
if(countries(country))
{
if(emailvalidation(emails))
{
if(gendervalidation(male,female))
{
}
}
}
}
}
}
return false;
}
function user_validation(username,x,y)
{
varuserlength = username.value.length;
if (userlength == 0 || userlength>= y || userlength< x)
{
alert("User Name should not be empty please enter the characters and length between "+x+" to "+y);
username.focus();
return false;
}
return true;
}
function pass_validation(pass,x,y)
{
varpasslength = pass.value.length;
if (passlength == 0 ||passlength>= my || passlength< mx)
{
alert("Password should not be empty please enter password and length between "+x+" to "+y);
passid.focus();
return false;
}
return true;
}
function numeric(address)
{
var let = /^[0-9a-zA-Z]+$/;
if(address.value.match(let))
{
return true;
}
else
{
alert('User address must have alphanumeric characters please enter the input as alphanumeric format');
address.focus();
return false;
}
}
function countries(country)
{
if(country.value == "Default")
{
alert('Choose your country from the given list');
country.focus();
return false;
}
else
{
return true;
}
}
function emailvalidation(emails)
{
var mf = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(emails.value.match(mf))
{
return true;
}
else
{
alert("Please enter valid email address!");
emails.focus();
return false;
}
}
function gendervalidation(male,female)
{
x=0;
if(male.checked)
{
x++;
} if(female.checked)
{
x++;
}
if(x==0)
{
alert('Select the gender either Male/Female');
male.focus();
return false;
}
else
{
alert(' Given data is Submitted Successfully');
window.location.reload()
return true;}
}
</script>
</body>
</html>Output:
Example #3
Code:
<!DOCTYPEHTML>
<html>
<head>
<title>Welcome To My Domain</title>
</head>
<body>
<form onsubmit="alert('Registration Form Submitted Successfully!')">
UserName:<input type="text" name="user"><br/>
College:<input type="text" name="colg"><br/>
City:<input type="text" name="city"><br/>
Mobile:<input type="text" name="mob"><br/>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>Output:
Conclusion
The onsubmit() method we used in the different scenarios but mainly it will focus with the html form based web applications because in 90% of the web applications we used forms for navigating the pages in applications. The on submit() event is triggered once the user requested data is submitted.