Menu icon Foundation
Reveal Modal on Form Submit - [F6]
Hello anyone...

DONT ASK WHY THIS FONT IS SO BIG ~ NO IDEA :O

Is there any examples or do you have any insight as to how a modal can be launched after a form is submitted in the new Foundation?

Apparently Foundation 6 has dropped its support of this natively and the brief mention of it in their docs offers little support for this particular scenario. I tried to piece this together with what I was able to dig up online but the only thing I found dealt with older Foundation ~ i.e. (http://stackoverflow.com/questions/20726375/pop-up-reveal-modal-dialog-when-submit-by-using-ajax)

From what I understand, the only way to do this is with Ajax? I have setup a test and it seams to function but I am unable to launch the modal. I am only trying to build a working example to hand off to the backend developers to run with so the actual form script is not important to me at the moment as this will eventually change. I just need to know how to implement on the staging site to give them a demo of what I am trying to do. (Basically a confirmation of the products that are added to the shopping cart).

______________________

Here is a codepen I managed to piece together (https://codepen.io/jinch/pen/BzJjRK).

Has anyone done this with F6?

Thanks
J

foundation 6revealmodalformAJAX

Hello anyone...

DONT ASK WHY THIS FONT IS SO BIG ~ NO IDEA :O

Is there any examples or do you have any insight as to how a modal can be launched after a form is submitted in the new Foundation?

Apparently Foundation 6 has dropped its support of this natively and the brief mention of it in their docs offers little support for this particular scenario. I tried to piece this together with what I was able to dig up online but the only thing I found dealt with older Foundation ~ i.e. (http://stackoverflow.com/questions/20726375/pop-up-reveal-modal-dialog-when-submit-by-using-ajax)

From what I understand, the only way to do this is with Ajax? I have setup a test and it seams to function but I am unable to launch the modal. I am only trying to build a working example to hand off to the backend developers to run with so the actual form script is not important to me at the moment as this will eventually change. I just need to know how to implement on the staging site to give them a demo of what I am trying to do. (Basically a confirmation of the products that are added to the shopping cart).

______________________

Here is a codepen I managed to piece together (https://codepen.io/jinch/pen/BzJjRK).

Has anyone done this with F6?

Thanks
J
jinch over 3 years ago

Ok... i think I figured it out.

AND THE FONT IS A PROPER SIZE NOW ~ YAY!

So the above code (should) work correctly if it is properly setup on your server. Just make the form script (what ever that may be) as a separate file and place at the same level of your checkout page. In my example the script is called "process.php" and it is linked in the form by (action="process.php").

This should correctly link and fire the script via Ajax and the Reveal modal should be properly launched. Worth noting in order to see the results, you need to view it live from the server and not just preview your page from your local computer.

I hope this helps anyone else who comes across.

> j