Jquery submit form без перезагрузки страницы

Я не очень хорошо знаком с JQuery. Я пытаюсь сделать форму, представленную в фоновом режиме без перезагрузки страницы. У меня есть скрытый div, который показывает и скрывается при нажатии, внутри div есть форма.Jquery submit form без перезагрузки страницы

У меня есть две проблемы:

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

источник

2013-10-07 qwaz

Вместо привязки к событию щелчка (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 Использования предотвратит перезагрузку и должен позволить вашему успеху дел до отображения.

источник

2013-10-07 19:48:22

Спасибо, e.preventDefault сделал трюк для подачи и успеха div. – qwaz

Я хочу предотвратить обновление после отправки формы .. этот код не работает должным образом –

Это работало для меня локально. Но когда я загружался на мой размещенный сервер, вызов .on («submit», ..) вызывал неопределенную ошибку .. не знаю, почему, потому что я думаю, что у меня есть одна и та же версия jQuery, где бы мой код не был развернут ?! Я нашел альтернативу обновлению строки следующим образом: $ («form»). Submit (function (e) {..}); .. который затем работал нормально – gnB

1) использовать event.preventDefault(); держать форму от представления -. http://api.jquery.com/event.preventDefault/

2) нет ничего в данном сценарии, которые должны becausing #RESULT, чтобы скрыть ... но вы можете попробовать $ («# результат») шоу() и увидеть, если это приносит его обратно

источник

2013-10-07 19:45:46

Seth, это не #результат, который скрывает это $ (". SlideDiv") – qwaz

Хорошо, тогда переключитесь на .sliddingDiv –

Проверьте, какую версию jquery вы используете, поскольку после jquery 1.8.2 функция «success» из jquery ajax устарела.

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

источник

2013-10-07 19:50:20

Jquery submit form без перезагрузки страницы

ответ

Смежные вопросы