javascript - Ajax 表单提交 PreventDefault() 不起作用

标签 javascript jquery ajax form-submit preventdefault

所以基本上我想在显示页面内容之前显示一个正在加载的 gif。所以我做了两个像这样的div。

<div id="wait"><img src="img/loading.svg" style="width:max-width;height:50px;"></div>
<div id="content"></div>

我添加了一些 JavaScript 来隐藏加载 gif 并显示内容,如下所示

 $('#content').css('display', 'none');


$(document).ready(function() { setTimeout(function() {
$('#wait').css('display', 'none');
}, 3000);

setTimeout(function() {
$('#content').load('portfolio.html');
}, 3100);});

现在,当我这样做时,下面显示的 ajax 表单不起作用。

$(document).ready(function() {
//Validate Form Start
var form = $('#form');

form.submit(function(evt) {
    evt.preventDefault();
    evt.stopPropagation();
    console.log(form.serialize());

$.ajax({
    type: 'POST',
    url: form.attr("action"),
    data: form.serialize(),
    success: function(response) {
        console.log("Email Sent.");
        $('.form').html('Message Sent! Await response.');
        $('.form').attr('class', 'btn btn-success btn-lg btn-block form');
        function submitTimeout() {
            $('.form').html('Send Another Message?');
            $('.form').attr('class', 'btn btn-danger btn-lg btn-block form');
        }
        setTimeout(submitTimeout, 3000);
        form.each(function(){
            this.reset();
            });
        }
    });
});
//Validate form end.});

它不使用ajax来提交表单。尽管提到了 PreventDefault() 方法,它还是使用默认提交。请问有什么修复吗?

最佳答案

在提交函数末尾添加 return false;。它会成功的。

关于javascript - Ajax 表单提交 PreventDefault() 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43674261/

相关文章:

JQuery 响应式菜单全宽

javascript - 如何更改 IP 本身带有额外参数的 url?

javascript - JS : Using getJSON to retrieve an object of data in a function

javascript - amphtml 标记显示错误 "Referenced AMP URL is not an AMP"

javascript - 预加载内容与 Ad-Hoc

javascript - 动画不起作用后 JQuery 单击

javascript - AJAX成功后如何关闭Bootstrap崩溃

javascript - 带有 promise 的 jQuery ajax 请求在 IE9 中不起作用

javascript - 使用 php-Codeigniter Ajax 进行多次删除/更新

javascript - 客户端代码 javascript 和 unbounce 的安全问题