how to remove the default action using preventDefault in javascript?

Question

In my code's else condition I want to remove preventDefault() and submit the form.

I don't know to do this?

if(email.val() != ""){
            //check email
            e.preventDefault();
            $.ajax({
                type: 'post',
                url: '/register/check-email',
                data: {email: email.val()},
                success: (data) => {
                    console.log(data);
                    if(data == 1){
                        name.css('border', '1px solid #248ea9');
                        email.css('border', '1px solid red');
                        $("div.wrapper div.right div.form form small.error-name").hide();
                        $("div.wrapper div.right div.form form small.error-email").hide();
                        $("div.wrapper div.right div.form form small.error-email-found").show();
                    }else{
                        //remove preventDefault()
                    }
                }
            })
        }

preventDefault() will not run in the else block since you haven't put it in there. Or rather, none of the code in the first set of { } will run if your else block of code fires. It's one or the other. You can't remove something thats not there to begin with. — GBWDev
– GBWDev, Commented Dec 13, 2019 at 15:24
@AlonEitan $.ajax() is an asynchronous task, but why should it not be possible to submit the form in the else branch? — Andreas
– Andreas, Commented Dec 13, 2019 at 15:28
@Andreas Because the OP is trying to prevent something that is depended on the response from the server — Alon Eitan
– Alon Eitan, Commented Dec 13, 2019 at 15:30
@Saad this should be the form, hence this.submit() would also work, hence no need to query the DOM again and no additional jQuery object. — Andreas
– Andreas, Commented Dec 13, 2019 at 15:31

Kaan · Accepted Answer · 2023-10-22 11:45:41Z

An answer is never too late :)

My workaround is to add e.stopPropagation() at the end of the code. This somewhat resets the form to its initial state.

if(email.val() != ""){
            //check email
            e.preventDefault();
            $.ajax({
                type: 'post',
                url: '/register/check-email',
                data: {email: email.val()},
                success: (data) => {
                    console.log(data);
                    if(data == 1){
                        name.css('border', '1px solid #248ea9');
                        email.css('border', '1px solid red');
                        $("div.wrapper div.right div.form form small.error-name").hide();
                        $("div.wrapper div.right div.form form small.error-email").hide();
                        $("div.wrapper div.right div.form form small.error-email-found").show();
                    }else{
e.stopPropagation();
                        //remove preventDefault()
                    }
                }
            })
        }

daroubaozi · Accepted Answer · 2019-12-13 15:40:36Z

I guess you executed e.preventDefault () in the button of a form, this will prevent the submit of the form, if you want to continue to submit you can use the submit() method of the form directly, like this:

if(email.val() != ""){
            //check email
            e.preventDefault();
            $.ajax({
                type: 'post',
                url: '/register/check-email',
                data: {email: email.val()},
                success: (data) => {
                    console.log(data);
                    if(data == 1){
                        name.css('border', '1px solid #248ea9');
                        email.css('border', '1px solid red');
                        $("div.wrapper div.right div.form form small.error-name").hide();
                        $("div.wrapper div.right div.form form small.error-email").hide();
                        $("div.wrapper div.right div.form form small.error-email-found").show();
                    }else{
                        //remove preventDefault()
                        // get form and submit
                        $("#form").submit()
                    }
                }
            })
        }

Amir Rezvani · Accepted Answer · 2019-12-13 15:53:11Z

0

it dose not matter where do you put the e.preventDefault() at the or at the bottom it will work the same.

if you have the action on the form you can put it right after you start the block of submit function.

var submit = function (e) {
    e.preventDefault()
}

i don't know about your case very much but you can use other methods like:

e. stopPropagation();

e.stopImmediatePropagation();

for further read : https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

answered Dec 13, 2019 at 15:53

Amir Rezvani

1,52313 silver badges41 bronze badges

3 Comments

Alon Eitan Over a year ago

It's inside an ajax callback, of course it's important where he put it!

Amir Rezvani Over a year ago

as far as i see you did not you put it before making request. and i'm telling you to put it before if statement. out side of the if block. and explain what do you want to do what is your default action is it the form ? i mean tell me why do you need the e.preventDefault at the first place.

Alon Eitan Over a year ago

But the OP specifically ask about a case where he want to put in inside the ajax success callback - This is what the question is about

Collectives™ on Stack Overflow

how to remove the default action using preventDefault in javascript?

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related