Modal after validation form

Topic: Modal after validation form

JLA free asked 4 years ago

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

Add comment

JLA free answered 4 years ago

0 0 Best answer

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 4 years ago

When form is submitted, the page is reloading, so the modal will close after submit.

Best,

JLA free commented 4 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,

Please insert min. 15 characters.

Grzegorz Bujański staff commented 4 years ago

Now you can just add submit even to the close button on the modal and submit your form. Best, Grzegorz

Add comment

Mateusz Łubianka staff answered 4 years ago

0 0 Best answer

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,

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB jQuery
MDB Version: 4.12.0
Device: Mac
Browser: Safari
OS: OSX
Provided sample code: Yes
Provided link: No

JLA

15Support score
1Questions 1Answers 0Snippets