不要在提交表单时重定向

Question

我有一个简单的基于 HTML 的表单，如下所示，它会在单击时不断刷新页面。

<form id="register" action="#" method="POST">
    <div class="input-group">
        <input class="form-control form-control-sm" placeholder="Email Address" name="email" type="text">
        <input type="hidden" name="form" value="register">
        <input type="hidden" name="type" value="websiteregistration">
        <span class="input-group-append">
            <button type="submit" class="btn btn-light" data-name="register" onclick="formSubmit(this)">Go!</button>
        </span>
    </div>
</form>

我试图在按下提交按钮时阻止它重定向。

(function($) {
    function formSubmit(e){
        e.preventDefault(); //This will prevent the default click action
        e.stopPropagation();

        var frm = $('#'+ $(this).data('name') +'');

        $.ajax({
            type: frm.attr('method'),
            url: '(url)',
            data: frm.serialize(),
            success: function (data) {
                console.log('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            }
        });

        return false;
    }
});

我添加了 return false 来阻止它重定向，以及 PreventDefault，但发送数据时页面仍然刷新（数据正在发送）。

我也尝试使用 $().submit 来完成此操作，但结果相同。（出于安全原因，我隐藏了该网址，但提交本身有效）。

使用名称数据属性是因为我在页面上有几个相同的表单，这样我可以使其可重用

Answer 1

使用event不this

formSubmit(event)

并删除不必要的代码：

formSubmit(event)

function formSubmit(e){
    e.preventDefault(); //This will prevent the default click action

    var frm = $('#'+ $(this).data('name') +'');

    $.ajax({
        type: frm.attr('method'),
        url: '(url)',
        data: frm.serialize(),
        success: function (data) {
            console.log('Submission was successful.');
            console.log(data);
        },
        error: function (data) {
            console.log('An error occurred.');
            console.log(data);
        }
    });
}