#JavaScript
#JavaScript / Event / onsubmit / Event that causes a task to run before submitting the form
JavaScript's onsubmit event allows you to do something before submitting the form values. Let's see how it works with a simple example.
Example 1
Create a simple membership registration page. The transfer button is created with an input tag.
Click Register and it will take you to ok.html.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
input, button { font-family: inherit; font-size: inherit; }
</style>
</head>
<body>
<h1>Register</h1>
<form action="ok.html" method="POST">
<p><input type="text" name="username" placeholder="Username" required></p>
<p><input type="password" name="password" placeholder="Password" required id="pw1"></p>
<p><input type="password" name="password-confirm" placeholder="Confirm Password" required id="pw2"></p>
<p><input type="submit" value="Register"></p>
</form>
</body>
</html>
Add onsubmit="jbSubmit();" to the form tag. It means that when you click the forward button, it will call the jbSubmit() function.
<form action="ok.html" method="POST" onsubmit="jbSubmit();">
jbSubmit() is a function that receives and informs two passwords.
<script>
function jbSubmit() {
var pw1 = document.getElementById( 'pw1' ).value;
var pw2 = document.getElementById( 'pw2' ).value;
alert( pw1 + ' vs ' + pw2 );
}
</script>
Here is the full code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
input, button { font-family: inherit; font-size: inherit; }
</style>
<script>
function jbSubmit() {
var pw1 = document.getElementById( 'pw1' ).value;
var pw2 = document.getElementById( 'pw2' ).value;
alert( pw1 + ' vs ' + pw2 );
}
</script>
</head>
<body>
<h1>Register</h1>
<form action="ok.html" method="POST" onsubmit="jbSubmit();">
<p><input type="text" name="username" placeholder="Username" required></p>
<p><input type="password" name="password" placeholder="Password" required id="pw1"></p>
<p><input type="password" name="password-confirm" placeholder="Confirm Password" required id="pw2"></p>
<p><input type="submit" value="Register"></p>
</form>
</body>
</html>Fill out the information in the form, click Register and it will give you two passwords, click OK and it will take you to ok.html.
Example 2
Add a return before jbSubmit().
<form action="ok.html" method="POST" onsubmit="return jbSubmit();">Compares two passwords and returns false if the values are different and true if they are the same.
<script>
function jbSubmit() {
var pw1 = document.getElementById( 'pw1' ).value;
var pw2 = document.getElementById( 'pw2' ).value;
if ( pw1 != pw2 ) {
alert( 'Confirm Password!' );
return false;
}
}
</script>Here is the full code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
input, button { font-family: inherit; font-size: inherit; }
</style>
<script>
function jbSubmit() {
var pw1 = document.getElementById( 'pw1' ).value;
var pw2 = document.getElementById( 'pw2' ).value;
if ( pw1 != pw2 ) {
alert( 'Confirm Password!' );
return false;
}
}
</script>
</head>
<body>
<h1>Register</h1>
<form action="ok.html" method="POST" onsubmit="return jbSubmit();">
<p><input type="text" name="username" placeholder="Username" required></p>
<p><input type="password" name="password" placeholder="Password" required id="pw1"></p>
<p><input type="password" name="password-confirm" placeholder="Confirm Password" required id="pw2"></p>
<p><input type="submit" value="Register"></p>
</form>
</body>
</html>When I enter the value and submit it goes to ok.html if the two passwords are the same.
If the values are different, display a message as follows and click OK to stay on the current page.