Modal after validation form

web
mobile

Topic: Modal after validation form

JLA pro asked 2 weeks 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

Mateusz Łubianka staff answered 2 weeks ago

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,


JLA pro answered a week ago

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 a week ago

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

Best,


JLA pro commented a week 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 days ago

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


Please insert min. 20 characters.
Status

Open

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.12.0
  • Device: Mac
  • Browser: Safari
  • OS: OSX
  • Provided sample code: No
  • Provided link: No