jQuery post is redirecting page

Question

Today I learned some jQuery.

<script>    
$('#mc-embedded-subscribe-form').on('submit', function(e){
e.preventDefault();
email=document.mc-embedded-subscribe-form.EMAIL.value;
$.post( "email.php", {email});
$('#fadeout').fadeOut(500);
$('#fadein').delay(500).fadeIn(500);
});
</script>

This is a script I'm running upon the event of a user submitting a form. The problem I'm having is that as soon as the form is submitted I get redirected to email.php, whereas I want to stay on the initial webpage. If I remove the line

$.post( "email.php", {email});

The rest works as expected. email.php works fine, it simply saves the email. What can I do to stop the redirect?

http://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit — Marian Gibala, Nov 09 '14 at 18:54

score 1 · Accepted Answer · answered Nov 09 '14 at 19:06

1

Since there's an error in your $.post() line the e.preventDefault() is not kicking in. Edit your code to the following:

$('#mc-embedded-subscribe-form').on('submit', function(e){
    e.preventDefault();
    email = $('[name=EMAIL]',this).val();
    $.post( "email.php", {email:email}, function() {
        $('#fadeout').fadeOut(500);
        $('#fadein').delay(500).fadeIn(500);
    });
});

answered Nov 09 '14 at 19:06

PeterKA

24,158
5
26
48

Thanks - I felt that this was in the spirit of the question and pointed out the error. – ShakesBeer Nov 10 '14 at 12:20

score 1 · Answer 2 · answered Nov 09 '14 at 19:52

if you want to post specific value from client side to server than its better to use $.ajax method then $.post i.e:

<script>    

    $('#mc-embedded-subscribe-form').on('submit', function(e){
    e.preventDefault();
    email=document.mc-embedded-subscribe-form.EMAIL.value;
    $.ajax({

        url:"email.php";
        data: email;
        success:function(){
           $('#fadeout').fadeOut(500);
           $('#fadein').delay(500).fadeIn(500);
        }

    });

});
</script>

$.ajax post specific value or values to server side without redirection of the page.

jQuery post is redirecting page

2 Answers2