Ajax Form Can not Prevent Page Reload with event.preventDefault();

Question

У меня есть следующий код, который должен отправить форму через Ajax без перезагрузки страницы:

$(document).on('submit', '.login_form', function(event){ 
    event.preventDefault(); 
    var $this = $(this); 
    $.ajax({ 
     data: "action=login_submit&" + $this.serialize(), 
     type: "POST", 
     url: _ajax_login_settings.ajaxurl, 
     success: function(msg){ 

      ajax_login_register_show_message($this, msg); 

     } 
    }); 
}); 

Однако по какой-то причине, несмотря на функции event.preventDefault(); которая должна предотвратить форму от фактически стрельб, его фактически делает огонь.

Мой вопрос: как я могу предотвратить вышеуказанную форму при перезагрузке страницы?

Благодаря

Answer 1

, например, вы можете написать, как этот

$(".login_form").on('submit', function(event){ 
    var $this = $(this); 
    $.ajax({   
     data: "action=login_submit&" + $this.serialize(), 
     type: "POST", 
     url: _ajax_login_settings.ajaxurl, 
     success: function(msg){ 

     ajax_login_register_show_message($this, msg); 

     } 
    }); 
    event.preventDefault(); 
}); 

Answer 2

не прикрепить слушателя документа вместо этого использовать на обработчик мыши на кнопку отправки и измените тип на кнопку.

<button id="form1SubmitBtn">Submit</button> 
$('#form1SubmitBtn').click(function(){ 

    //do ajax here 
}); 

Happy Coding !!!

Answer 3

Вы можете использовать jquery и ajax для этого. Вот хороший код части ниже, который не обновляет страницу, а вместо этого отправляет форму, которая скрывается и заменяется благодарственным сообщением. Данные формы отправляются на адрес электронной почты, используя скрипт sendmail.php.

Предполагая, что ваша форма имеет 3 поля ввода - имя, адрес электронной почты и сообщение.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 

<script type="text/javascript"> 
jQuery(function() { 
jQuery("#button").click(function() { 

var name=jQuery('#name').val(); 
var email=jQuery('#email').val(); 
var message=jQuery('#message').val(); 

var dataString = 'name='+ name + '&email=' + email + '&message=' + message; 

jQuery.ajax({ 
type: "POST", 
url: "sendmail.php", 
data: dataString, 
success: function() { 
jQuery('#contact_form').html("<div id='message'></div>"); 
jQuery('#contactForm').hide(); 
jQuery('#message').html("<h2>Contact Form Submitted!</h2>") 
.append("<p>Thank you for your submission. We will be in touch shortly.</p>").hide() 
.fadeIn(1500, function() { 
}); 
} 
}); 
return false; 
}); 
}); 

</script> 

В верхней части вашего тега формы просто добавьте это, чтобы отобразить сообщение благодарности.

<div id='message'></div> 

Наслаждайтесь кодированием !!!!!!!