jQuery函数无法处理Form Submit

jQuery function not working on Form Submit

本文关键字：Form Submit 处理 函数 jQuery      更新时间：2023-09-26

我从W3C的例子中看到了这样的东西。表单提交时发生操作（警报）。然而，当我尝试在这里使用自己的函数时，我的操作没有发生（显示隐藏的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>

您需要在执行代码之前取消表单提交：

$(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();
    });
});

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

实际上，你发布的jfiddle并没有阻止form，它向你显示了一个阻止所有js执行（浏览器行为）的警报，如果你在alert中选择ok，form就会通过

event.preventDefault()语句的意思是：不要处理这个函数

之外的任何东西

试试这个：

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

您至少需要一个类型为"submit"的表单元素（按钮或输入）。那么jQuery.submit（）或.on（'submit’，..）肯定会起作用。

相关文章：