Question

我不确定我做错了什么，但是下面的表单，提交重新加载页面。我已将e.preventDefault();添加到我的函数中以尝试阻止它重新加载，但每次我提交页面重新加载。我已经清除了我的缓存以消除它。我也尝试在函数中加return false，这没有用。

我将$("#panel-submit").submit(function (e) {更改为此$("#panel-submit").on("submit" function (e) {，这也没有帮助。

有谁知道为什么这个表单正在重新加载页面？

<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是提交按钮。提交按钮没有提交事件。

这是可以提交的表格。因此，请将ID更改为#proposal-form

Answer 2

我相信你需要改变，

这：

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

至此：

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

使用preventDefault函数重新加载表单提交

2 个答案: