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

Question

I have the following code which is supposed submit a form via Ajax without having to reload the page:

$( 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 );

        }
    });
});

However for some reason, despite the event.preventDefault(); function which is supposed to prevent the form from actually firing, it actually does fire.

My question is, how do I prevent the above form from reloading the page?

Thanks

take a look on [this](http://stackoverflow.com/questions/5150532/how-do-i-stop-the-form-from-reloading-using-javascript) — Sergey, Aug 02 '14 at 12:02
I did take a look, but unfortunately I don't have access to the form generation code so I can't modify the form with the answer they provided. — user2028856, Aug 02 '14 at 12:04
probably [this](http://stackoverflow.com/questions/17456231/form-submit-preventing-page-reload-jquery) can help, just put `event.preventDefault()` or `return false;` to the and of the function — Sergey, Aug 02 '14 at 12:07
You mean add those two to the end of the .on('submit')? I did that and still refreshes — user2028856, Aug 02 '14 at 12:14

score 2 · Answer 1 · answered Aug 02 '14 at 12:20

2

don't attach a listener on document instead use a on click handler on the submit button and change the type to button.

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

  //do ajax here
});

Happy Coding !!!

answered Aug 02 '14 at 12:20

Ayush Ghosh

487
2
10

I don't have access to the form html generation code, so I can't just modify the html like the above suggestion, sorry – user2028856 Aug 02 '14 at 12:24

Sergey · Answer 2 · 2014-08-02T23:16:58.207

0

for instance you can write like this

 $(".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();
 });

edited Aug 02 '14 at 23:16

answered Aug 02 '14 at 12:14

Sergey

471
3
10

I tried your latest edit, the problem is that the form doesn't submit – user2028856 Aug 02 '14 at 12:30
sorry :), it was mistake in 'submin' => 'submit', fixed now – Sergey Aug 02 '14 at 12:32
No I actually changed it to 'submit' and it still didn't submit. But if I change 'var $this' to 'var $this = $('.login_form')', the form submits but reloads the page – user2028856 Aug 02 '14 at 12:33
hm.. please, provide your html – Sergey Aug 02 '14 at 12:35
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/58541/discussion-between-sergey-boiko-and-user2028856). – Sergey Aug 02 '14 at 12:38

score 0 · Answer 3 · answered Feb 10 '15 at 15:45

You can use jquery and ajax to do that. Here is a nice piece code below that doesn't refresh the page but instead on submit the form gets hidden and gets replaced by a thank you message. The form data is sent to an email address using sendmail.php script.

Assuming your form has 3 input fields - name, email and message.

<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>

On top of your form tag just add this to display the thank you message.

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

Enjoy coding!!!!!!!

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

3 Answers3

Linked