Question

我从W3C示例中看到了类似this的内容。表单提交（警报）上发生了一个动作。但是，当我尝试使用我自己的函数here时，我的动作不会发生（显示隐藏的div）。目标是使用'GET'请求在表单提交上显示隐藏的div。我是javascript / jQuery / ajax的新手，但是jQuery不应该在没有刷新页面的情况下调用服务器吗？

无法正常使用javascript：

$(document).ready(function(){
    $("form").submit(function showDiv(){
        document.getElementById("showMe").style.display = "block";
    });
});

不工作html：

<body>
    <form action="" method="GET">
    <input type="text" name="LastName" value="Mouse"><br>
    <input type="submit" value="Submit">
    </form> 

    <div id="showMe" style="display: none;">
    <p>hey this should be hidden</p>
    </div>
</body>

Answer 1

在执行代码之前，您需要cancel the form submit：

$(document).ready(function(){
    $("form").submit(function(e){
        // At this point you'll want to have some type of flag to indicate whether you
        // should allow the form submission to continue, or cancel the event. For example,
        // it could be whether not showMe is visible (I don't know what you're going for).

        e.preventDefault();
        $("#showMe").css("display", "block");

        // Submit form after your code runs (or whenever you want)
        $("form").submit();
    });
});

Answer 2

$(document).ready(function(){
    $("form").submit(function(e){
        e.preventDefault(); // this will prevent the submit
        document.getElementById("showMe").style.display = "block";
    });
});

实际上，您发布的jfiddle未阻止form，它会向您显示阻止所有js执行的警报（浏览器行为），如果您在alert中选择确定，则form通过

event.preventDefault()语句表示：不处理此函数之外的任何内容

Answer 3

试试这个：

$("form").submit(function(e){
    e.preventDefault();
    $("#showMe").show();
});

Answer 4

您需要至少一个表单元素（按钮或输入），其类型为＆＃34;提交＆＃34;。然后jQuery .submit（）或.on（＆＃39; submit＆＃39;，..）肯定会有效。

jQuery函数不能用于表单提交

4 个答案: