小编典典

jQuery提交表单而无需重新加载页面

ajax

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

阅读 233

收藏
2020-07-26

共1个答案

小编典典

不应绑定到click事件(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。

2020-07-26