jQuery函数不处理表单提交

I saw from W3C example something like this. An action happens on form submit(an alert). However, when I tried with my own function here, my action doesn't happen (show hidden div). Goal is to show hidden div on form submit using 'GET' request. I am new to javascript/jQuery/ajax, but isn't jQuery supposed make call to server without refreshing page?

我从W3C的例子中看到了类似的东西。在表单提交(警报)上发生操作。但是，当我尝试使用我自己的函数时，我的操作没有发生(显示隐藏div)。目标是使用“GET”请求在表单提交上显示隐藏的div。我是javascript/jQuery/ajax新手，但是jQuery不应该不刷新页面就调用服务器吗?

not working javascript:

javascript不工作:

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

not working html:

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>

4 个解决方案

#1

You need to cancel the form submit before executing your code:

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

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

#2

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

Actually the jfiddle you posted is not blocking the form, it shows you an alert that block all js execution (browser behavior), if you select ok in the alert, the form goes through

实际上，您发布的jfiddle并没有阻塞表单，而是显示了一个警告，该警告阻止所有js执行(浏览器行为)，如果您在警告中选择ok，表单就会通过

the event.preventDefault() statement means: don't process anything outside this function

preventdefault()语句的意思是:不要处理函数之外的任何东西。

#3

Try this:

试试这个:

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

#4

You need at least one form element (button or input), that has type "submit". Then jQuery .submit() or .on('submit',..) will definitely work.

您至少需要一个表单元素(按钮或输入)，它具有类型“submit”。然后，jQuery .submit()或.on('submit'，.. .)肯定会有用。

#1