Question

我对JQuery不太熟悉。我正在尝试制作一个在后台提交但不重新加载页面的表单。

我有一个隐藏的div显示和隐藏点击，div内有一个表单。

我有两个问题：

1）当表单验证失败时，表单仍然会被提交。我试图将验证和提交代码置于条件if(validation == valid) { $.ajax.... }中，但它无法正常工作。

2）提交表单后，div会自动隐藏，因此无法看到成功的消息。

以下是代码：

$().ready(function() { 

    // validate the form when it is submitted, using validation plugin.
    var validator = $("#contactform").validate({
        errorContainer: container,
        errorLabelContainer: $(),
    onkeyup: false,
    onclick: false,
    onfocusout: false,
    errorPlacement: function (error, element) { 
error.insertBefore(element);    
}   
    });
});

$(function() {

    //this submits a form
$('input[type=submit]').click(function() {
        $.ajax({
            type: "POST",
            url: "contact.php",
            data: $("#contactform").serialize(),
            beforeSend: function() {
                $('#result').html('<img src="loading.gif" />');
            },
            success: function(data) {
                $('#result').html(data);
            }

        })
    })
})


//this shows and hides div onclick
$(document).ready(function(){   
        $(".slidingDiv").hide(); 
        $(".show_hide").show(); 
    $('.show_hide').click(function(){ 
    $(".slidingDiv").slideToggle(); 
    });
});

Answer 1

您应该绑定到表单的 input[type=submit] 事件，而不是绑定到点击事件（submit）。

$("form").on("submit", function (e) {
    e.preventDefault();

我也不确定验证。如果它以异步方式运行，则需要回调。如果它同步运行，它何时被触发？似乎应该在提交表单时完成，除非您的验证插件单独执行此操作：

$("form").on("submit", function (e) {
    e.preventDefault();
    if ($(this).validate(options)) {
        $.ajax

使用e.preventDefault将阻止重新加载，并且应该允许显示成功div。

Answer 2

1）使用event.preventDefault（）;保持表单不提交 - http://api.jquery.com/event.preventDefault/

2）给定脚本中没有任何内容可以使#result隐藏...但你可以尝试$（'＃result'）。show（）并查看是否会将其恢复

Answer 3

请检查您正在使用哪个jquery版本，因为在jquery 1.8.2之后，jquery ajax的“success”函数已被弃用。

使用e.preventDefault（）来阻止实际的提交事件。

JQuery提交表单而不重新加载页面

3 个答案: