Question

我正在尝试阻止提交表单，但即使触发了警报，表单仍在提交。这是我的Javascript代码（简称为必需品）：

        if(status == 1) {
            alert("Test");
            e.preventDefault();
            e.stopPropagation();
            var elem = document.getElementById("error");
            if(elem) {
                elem.parentNode.removeChild(elem);
            }
            var span = document.createElement("span");
            span.className = "error_class";
            span.id = "error";
            span.innerHTML = "Please try again.";
            document.getElementById("field").appendChild(span);
            return false;
        }

我正在测试Firefox Beta和Google Chrome Beta。有人能告诉我缺少什么吗？上面的代码是分配给按钮的事件监听器的函数的一部分。

Answer 1

这样可以解决问题：

$('form').submit(function(e) {
    e.preventDefault();
    //Do your stuff
    alert('Form was not submitted!');
});

或者您可以将onclick侦听器附加到提交按钮

$('form .submit-button').click(function(e) {
    e.preventDefault();
    //Do your stuff
    alert('Form was not submitted!');
});

希望这会有所帮助。如果没有，请向我们展示更多代码并使用控制台检查错误。

Answer 2

感谢JasonK的回答，我做了一些额外的研究并找到了解决方案。我发布的新代码与前一代码完全相同：

e.preventDefault();
e.stopPropagation();
if(status == 1) {
    var elem = document.getElementById("error");
    if(elem) {
        elem.parentNode.removeChild(elem);
    }
    var span = document.createElement("span");
    span.className = "error_class";
    span.id = "error";
    span.innerHTML = "Please try again.";
    document.getElementById("field").appendChild(span);
    return false;
}else{
    document.getElementById("form").submit();
}

在这段代码中，主要区别在于，只要调用事件，我就会在函数顶部调用e.preventDefault（）和e.stopPropagation（）。然后，我使用submit（）方法，这样如果status不是1，表单仍然会被提交。我希望我能够解释得足够多，这可能对其他人有所帮助，因为这是我的第一个答案。

表格仍在提交

2 个答案: