jQuery .submit() not being called upon form submission

Question

I simplified my code to reduce extraneous information, but I am having the same problem with the reduced code as with the more complex version. I have a form like this:

<form id="password_reset_form" action="script_reset_password.php" method="POST">
    <input type="submit" value="Set Password" class="button-inactive" />
</form>

and jQuery code like this:

<script type="text/javascript">
    $(document).ready(function(){
        $("#password_reset_form").submit(function(){
            alert("form submit attempted");
            event.preventDefault();
        }
    });
</script>

But the jQuery .submit() is not being called. The goal is to prevent the form submission and display an error message if a particular condition is met, but my question is, why isn't .submit() being called when the <input type="submit" /> is clicked?

Answer 1

You need to catch the event from within the callback function.

$(document).ready(function(){
    $("#password_reset_form").submit(function(e){
        alert("form submit attempted");
        e.preventDefault();
    });
});

Answer 2

You have syntax errors in your code, The document ready needs to be closed.

$(document).ready(function(){
        $("#password_reset_form").submit(function(evt){
            alert("form submit attempted");
            evt.preventDefault();
        });
});

https://jsfiddle.net/h19bk8ft/2/