Trigger a button click and generate alert on form submission in JavaScript

JavascriptWeb DevelopmentObject Oriented Programming

Let’s say the following is our button −

<button id="submitForm">Submit</button>

On the basis of button id, on form submission, generate an alert −

$("#submitForm").click(function() {
   alert("The Form has been Submitted.");
});

Example

 Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
CollegeId=<input id="collegeId" type="text"><br />
CollegeName= <input id="collegeName" type="text"><br />
<button id="submitForm">Submit</button>
<script>
   $("#submitForm").click(function() {
      alert("The Form has been Submitted.");
   });
</script>
</body>
</html>

To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.

Output

This will produce the following output −

After clicking the button, you can see the following output −

raja
Published on 11-Sep-2020 06:46:26
Advertisements