Topic: Modal after validation form
Dear,
I would like to show a modal message after a validation form. I'm using the following code but modal doesn't pop-up before php file is called.
Can you help me on this.
Rgds,
Blockquote
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
return false;
} else {
$("#myModal").modal("show");
}
}, false);
});
}, false);
})();
Blockquote
enter code here
Hi @JLA,
Modal will not appear because it haven't got enough time. If you add event.preventDefault(); in you're code, it will appear:
else {
event.preventDefault();
$("#myModal").modal("show");
}
Best,
Hi,
many thanks for the answer. When I add this code, indeed the model shows up but form submission is cancelled. How can I do to also have the form submitted ?
Many thanks in advance.
Rgds
Mateusz Łubianka staff commented 5 years ago
When form is submitted, the page is reloading, so the modal will close after submit.
Best,
JLA commented 5 years ago
Hi, Sorry to borrow you but it doesn't work. To be sure I have explained it correctly, what I want to have is :
- when I click on the submit button, we have the modal showing up
- then, when I close the modal, the form is automatically submitted
If I use you tip : else {event.preventDefault();...}, indeed the modal shows up but the form is not submitted.
Can you please help me to solve this case ?
I have seen a lot of similar subject about this on the web but it looks like we have to use AJAX to solve it but I'm not familiar with.
Many thanks in advance for your support.
Kindest regards,
JL
Grzegorz Bujański staff commented 5 years ago
Now you can just add submit even to the close button on the modal and submit your form. Best, Grzegorz
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.12.0
- Device: Mac
- Browser: Safari
- OS: OSX
- Provided sample code: No
- Provided link: No