Article Categories

Selected Reading

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

Javascript Web Development Object Oriented Programming

In JavaScript, you can trigger a button click event and generate an alert on form submission using event handlers. This tutorial demonstrates how to attach a click event listener to a button and display an alert when the form is submitted.

HTML Structure

First, let's create a basic HTML form with a button:

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

JavaScript Event Handler

Using jQuery, you can attach a click event handler to the button based on its ID:

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

Complete Example

Here's a complete working example that demonstrates the button click event with form submission alert:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Click Alert Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form>
        <label for="collegeId">College ID:</label>
        <input id="collegeId" type="text" placeholder="Enter College ID"><br><br>
        
        <label for="collegeName">College Name:</label>
        <input id="collegeName" type="text" placeholder="Enter College Name"><br><br>
        
        <button id="submitForm" type="button">Submit</button>
    </form>

    <script>
        $("#submitForm").click(function() {
            alert("The Form has been Submitted.");
        });
    </script>
</body>
</html>

Alternative: Pure JavaScript Approach

You can also achieve the same functionality without jQuery using vanilla JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pure JavaScript Button Click</title>
</head>
<body>
    <form>
        <label for="collegeId">College ID:</label>
        <input id="collegeId" type="text" placeholder="Enter College ID"><br><br>
        
        <label for="collegeName">College Name:</label>
        <input id="collegeName" type="text" placeholder="Enter College Name"><br><br>
        
        <button id="submitForm" type="button">Submit</button>
    </form>

    <script>
        document.getElementById("submitForm").addEventListener("click", function() {
            alert("The Form has been Submitted.");
        });
    </script>
</body>
</html>

Key Points

Use type="button" to prevent automatic form submission
jQuery's click() method provides a simple way to handle click events
Vanilla JavaScript's addEventListener() offers more control and doesn't require external libraries
Both approaches effectively trigger alerts on button clicks

Comparison

Method	Dependencies	Code Length	Browser Support
jQuery	Requires jQuery library	Shorter syntax	All browsers
Vanilla JavaScript	No external dependencies	Slightly longer	Modern browsers

Conclusion

Both jQuery and vanilla JavaScript provide effective ways to handle button click events and generate alerts. Choose jQuery for simpler syntax or vanilla JavaScript to avoid external dependencies.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

11K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next