jQuery submit() example

jQuery submit() function is used to bind an event handler to the "submit" JavaScript event, or trigger that event on an element.
In short, The submit event occurs when a form is submitted.

Example 1

If you'd like to prevent forms from being submitted unless a flag variable is set, try:
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>submit demo</title>
    <style>
        p {
            margin: 0;
            color: blue;
        }

        div,
        p {
            margin-left: 10px;
        }

        span {
            color: red;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>

    <p>Type 'correct' to validate.</p>
    <form action="javascript:alert( 'success!' );">
        <div>
            <input type="text">
            <input type="submit">
        </div>
    </form>
    <span></span>

    <script>
        $("form").submit(function(event) {
            if ($("input").first().val() === "correct") {
                $("span").text("Validated...").show();
                return;
            }

            $("span").text("Not valid!").show().fadeOut(1000);
            event.preventDefault();
        });
    </script>

</body>

</html>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

Example 2

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $("form").submit(function() {
                alert("Submitted");
            });
        });
    </script>
</head>

<body>

    <form action="">
        First name: <input type="text" name="FirstName" value="Mickey"><br> Last name: <input type="text" name="LastName" value="Mouse"><br>
        <input type="submit" value="Submit">
    </form>

</body>

</html>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

References


Comments