jQuery的无刷新页面提交表单 [英] Jquery submit form without reloading page

问题描述

我不是很熟悉的jQuery的。我试图做一个提交的背景下，如果不重新加载页面的形式。 我有一个隐藏的分区，显示和隐藏的点击，在div里面有一个表格。

我有两个问题：

1）当表单验证失败，表单仍在递交。我试图把验证和提交codeS状况<​​code>如果（验证==有效）{$就....} ，但它不能正常工作。

2）当这个表单提交的DIV自动隐藏，不能看到这么成功的消息。

这里的code：

  $（）。就绪（函数（）{

    //验证表单时，它提交，使用验证插件。
    VAR验证= $（＃联系形式）。验证（{
        errorContainer：集装箱，
        errorLabelContainer：$（）
    的onkeyup：假的，
    的onclick：假的，
    onfocusout在：假的，
    errorPlacement：功能（错误，元素）{
error.insertBefore（元）;
}
    }）;
}）;

$（函数（）{

    //这个提交表单
$（'输入[类型=提交]）。点击（函数（）{
        $阿贾克斯（{
            键入：POST，
            网址：contact.php
            数据：$（＃联系形式）序列化（）。
            beforeSend：函数（）{
                $（'＃结果）HTML（'＆LT; IMG SRC =loading.gif/＆GT;'）;
            }，
            成功：功能（数据）{
                $（'＃结果）HTML（数据）。
            }

        }）
    }）
}）


//这个显示和隐藏DIV onlcick
$（文件）。就绪（函数（）{
        $（slidingDiv。）隐藏（）。
        $（show_hide）显示（）。
    $（'。show_hide）。点击（函数（）{
    $（。slidingDiv）的slideToggle（）。
    }）;
}）;
 

解决方案

而不是绑定到click事件（输入[类型=提交] ），你应该绑定到 提交 的事件的形式。

  $（形式）。在（提交，功能（五）{
    即preventDefault（）;
 

我也不能确定验证。如果异步运行，回调是必要的。如果同步运行，当它被触发？看起来，除非您验证插件做了自己应该做的，当表单提交：

  $（形式）。在（提交，功能（五）{
    即preventDefault（）;
    如果（$（本）.validate（选件））{
        $就
 

使用即preventDefault 将prevent重装，应该让你的成功div来显示。

I'm not very familiar with Jquery. I'm trying to make a form that is submitted in the background without reloading page. I have a hidden div which shows and hides on click, inside the div there's a form.

I have two problems:

1) When the form validation fails, the form is still submitted. I tried to put validation and submission codes in condition if(validation == valid) { $.ajax.... } but it does not work properly.

2) After the form is submitted the div automatically hides, so successful message cannot be seen.

Here's the code:

$().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 onlcick
$(document).ready(function(){   
        $(".slidingDiv").hide(); 
        $(".show_hide").show(); 
    $('.show_hide').click(function(){ 
    $(".slidingDiv").slideToggle(); 
    });
}); 

解决方案

Rather than bind to the click event (input[type=submit]) you should bind to the submit event for the form.

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

I'm also not sure about the validation. If it runs asynchronously, a callback is required. If it runs synchronously, when does it get triggered? It seems like it should be done when the form is submitted unless your validation plugin does that on its own:

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

Using e.preventDefault will prevent reload and should allow your success div to display.

这篇关于jQuery的无刷新页面提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！