e.preventDefault not working in Axios with Vue JS

Question

In my Laravel project, I have created a method in my Vue instance to check the availability of resources on form submit. I'm checking the availability with an AJAX call by using axios. When one or more resources are not available, I get an array with error messages as a response. Consequently, I want to prevent my form from submitting by using e.preventDefault(). Nonetheless, this is not working and I am wondering why.

When I use e.preventDefault() outside my axios request, the form is prevented from submitting. So I guess that I must extend the scope of the 'e variable'? So how can I do this?

This is my code:

checkAvailability(e){
            let date = document.getElementById('date').value;
            let errorList = document.getElementById('errors');

            date = date.split('-').reverse().join('-');

            axios.get('/materials/check-availability', {
                params: {
                    date: date,
                    time: this.time,
                    ek: this.ekNumber,
                    dk: this.dkNumber,
                    ck: this.ckNumber,
                    zv: this.zvNumber,
                    ton: this.tonNumber
                }
            })
            .then(function(response) {
                let errors = response.data;

                if(errors.length > 0)
                {
                    e.preventDefault();
                    
                    errorList.innerHTML = '';

                    for(let i = 0; i < errors.length; i++)
                    {
                        let li = document.createElement('li');

                        li.innerText = errors[i];

                        errorList.appendChild(li);
                    }

                    errorModal.show();
                }
            })
            .catch(function(error){
                console.log(error);
            });

            // e.preventDefault();
        }

You can't. preventDefault is supposed to be either used synchronously or not used at all, and you have asynchronous code. Get rid of HTML submit event and do it programmatically. — Estus Flask
– Estus Flask, Commented Aug 28, 2021 at 11:57
put the e.preventDefault() at the top and try that. But if you want to call e.preventDefault() conditionally based on an async response that won't work — flx
– flx, Commented Aug 28, 2021 at 11:59
if this is a form submission, you could preventDefault always, and then programatically submit the form (i.e. use axios) when applicable in the .then — Bravo
– Bravo, Commented Aug 28, 2021 at 12:03

Coffee bean · Accepted Answer · 2021-08-28 12:07:23Z

You cannot call e.preventDefault() inside a promise and expect it to work. By the time it is called the default behaviour will have already happened as a promise will return at somepoint in the future (async).

You will need to call prevent default as soon as the form is submitted then conditionally submit the form yourself. See below for a basic example.

checkAvailability(e){
        e.preventDefault();

        let date = document.getElementById('date').value;
        let errorList = document.getElementById('errors');
        const yourForm = document.querySelector('form');

        date = date.split('-').reverse().join('-');

        axios.get('/materials/check-availability', {
            params: {
                date: date,
                time: this.time,
                ek: this.ekNumber,
                dk: this.dkNumber,
                ck: this.ckNumber,
                zv: this.zvNumber,
                ton: this.tonNumber
            }
        })
        .then(function(response) {
            let errors = response.data;

            if(errors.length > 0)
            {
                
                errorList.innerHTML = '';

                for(let i = 0; i < errors.length; i++)
                {
                    let li = document.createElement('li');

                    li.innerText = errors[i];

                    errorList.appendChild(li);
                }

                errorModal.show();
            } else {
                yourForm.submit();
            {

        })
        .catch(function(error){
            console.log(error);
        });
    }

Collectives™ on Stack Overflow

e.preventDefault not working in Axios with Vue JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related