JQuery отправить форму без перезагрузки страницы

Я не очень знаком с 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(); 
    });
});

ОТВЕТЫ

Ответ 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 отобразиться.

Ответ 2

1) Используйте event.preventDefault();, чтобы сохранить форму от отправки -http://api.jquery.com/event.preventDefault/

2) В данном скрипте нет ничего, что могло бы спрятать #result, но вы можете попробовать $('#result').show() и посмотреть, вернет ли это его обратно

Ответ 3

Проверьте, какую версию jQuery вы используете, потому что после jQuery 1.8.2 функция "success" из jQuery Ajax устарела.

Используйте e.preventDefault(), чтобы предотвратить фактическое событие отправки.