Form submission reloading with preventDefault function

Question

I am unsure what I am doing wrong, but my form below, on submit reloads the page. I have added e.preventDefault(); to my function to try and stop it from reloading, but every time I submit the page reloads. I have cleared my cache to eliminate that. I also tried adding in a return false for the function, which did not help.

I changed $("#panel-submit").submit(function (e) { to this $("#panel-submit").on("submit" function (e) { , which did not help either.

Does anyone see why this form is reloading the page?

<form method="POST" action="" id="proposal-form">
    <div class="panel-input"><input type="text" id="proposal-name" class="proposal-input" placeholder="Name *"></div>
    <div class="panel-input"><input type="email" id="proposal-email" class="proposal-input" placeholder="Email *"></div>
    <div class="panel-input"><input type="tel" id="proposal-phone" class="proposal-input" placeholder="Phone *"></div>
    <div class="panel-input"><input type="text" id="proposal-location" class="proposal-input" placeholder="Location *"></div>
    <input type="submit" value="SUBMIT" id="panel-submit">
</form>

$("#panel-submit").submit(function (e) {
        e.preventDefault();
        var proposal_name = $('#proposal-name').val();
        var proposal_email = $('#proposal-email').val();
        var proposal_phone = $('#proposal-phone').val();
        var proposal_location = $('#proposal-location').val();
        $.ajax({
            url: "proposal-send.php", 
            type: "POST",
            data: {
                "proposal_name": proposal_name,
                "proposal_email": proposal_email,
                "proposal_phone": proposal_phone,
                "proposal_location": proposal_location
            },
            success: function (data) {
            //  console.log(data);
                if (data == "Error!") {
                    alert("Unable to add to newsletter");
                    alert(data);
                } else {
                    $("#proposal-form")[0].reset();
                }
            },
            error: function (xhr, textStatus, errorThrown) {
                alert(textStatus + " | " + errorThrown);
            }
        });
        //return false;
    });

Answer 1

#panel-submit is the submit button. Submit button does not have submit event.

It is the form which can be submitted. So change the id to #proposal-form

Answer 2

I believe you need to change,

This:

$("#panel-submit").submit(function (e)...

To This:

$("#panel-submit").click(function (e)...