preventDefault() not working on a form request

Question

I have the following form which process a password recovery script requested by the user.

<form class="forget-form" id="forget-form" action="datacenter/functions/passwordRecovery.php" method="POST">
    <h3 class="font-green">Esqueceu sua senha?</h3>
    <p> Digite seu e-mail abaixo para receber o procedimento para uma nova senha.</p>
    <div class="form-group" style="margin-bottom:0px">
        <input class="form-control placeholder-no-fix" type="email" autocomplete="off" placeholder="Seu e-mail" name="email" id="email" required/>
    </div>

    <div class="form-actions">
        <button type="button" id="back-btn" class="btn red btn-outline uppercase"><i class="fa fa-chevron-circle-left"></i> voltar</button>
        <button type="submit" class="btn btn-success uppercase pull-right uppercase"><i class="fa fa-paper-plane"></i> enviar</button>
    </div>
</form>

For that, I'm using ajax to keep the user on the same screen without any redirect.

$("#forget-form").submit(function(e){
    e.preventDefault();
    var email = $("#email").val();
    if(isEmail(email) == true){
        $.ajax({
            url: 'datacenter/functions/passwordRecovery.php',
            type: 'POST',
            data: new FormData(this),
            async: true,
            contentType: false,
            processData: false,
            success: function(data){
                console.log(data);
            },
            error: function(error, errorThrown, errorShowcase){
                console.log(data);
            }
        });
    } else {
        console.log('this is not an email');
    }
});

The file passwordRecovery.php only echo "success"; to log on the console, just to check if it really worked, and it is working, but too fast, it logs on the console and after that redirects me to passwordRecovery.php, not preventing the default action of the form.

Have you ever faced that?

already did that, but it didnt work. also tried to run the submit in $(function(){});, it keeps redirecting me — jvbs, May 04 '18 at 13:54
Any errors in your developer console? Do you have any other elements with the same ID? What happens if you do `console.log(document.querySelectorAll("#forget-form").length);` ? — , May 04 '18 at 14:01
How about if you remove all code from the `submit` handler, except for the `e.preventDefault()`. Does it still fail to prevent the submission? — , May 04 '18 at 14:07
it is funny because if i type a not valid e-mail, it prevents my form to process and log `this is not an email`, but if it is a valid e-mail, it redirects — jvbs, May 04 '18 at 14:09
can you try adding e.preventDefault() inside your success ajax function? — Top-Bot, May 04 '18 at 14:15
This may be helpful: https://stackoverflow.com/questions/9177252/detecting-a-redirect-in-jquery-ajax (Actually, not sure if it's relevant. I didn't think XHR could redirect the viewed page.) — , May 04 '18 at 14:16
If you remove that contentType option, does it make a difference - I once I used that contentType and as the page I was loading was not the type it expected, it redirected to the page instead of ajaxing it — Pete, May 04 '18 at 14:24
In your browser console, go to settings and ensure you have "preserve log" selected. It could be that you have a script error which is being cleared because you are POSTing. — freedomn-m, May 04 '18 at 14:36
I don't believe `false` is a proper `contentType` parameter... — War10ck, May 04 '18 at 15:47

score 0 · Answer 1 · edited May 05 '18 at 05:16

0

You can try this:

$('#forget-form').submit(function () {
//your code
return false;
});

edited May 05 '18 at 05:16

Jamal

763
7
22
32

answered May 05 '18 at 05:09

Therichpost

1,759
2
14
19

preventDefault() not working on a form request

1 Answers1