10

我对 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(); 
    });
});
4

3 回答 3

26

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。

于 2013-10-07T19:48:22.087 回答
1

1）event.preventDefault();用于阻止提交表单 - http://api.jquery.com/event.preventDefault/

2) 给定脚本中没有任何内容会导致#result 隐藏，但您可以尝试$('#result').show()看看是否可以将其恢复

于 2013-10-07T19:45:46.087 回答
1

请检查您使用的是哪个 jQuery 版本，因为在 jQuery 1.8.2 之后，来自 jQuery Ajax 的“成功”功能已被弃用。

用于e.preventDefault()防止实际提交事件。

于 2013-10-07T19:50:20.200 回答