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 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);
});
}