Menu icon Foundation
Populate Modal with form data

I would like to populate parts of a modal with an input of a form.

Example:
Form on my site with a "name" input
User fills out form, hits "submit" and modals opens
User gets greeted by Hello, "name"! (where name is the data from the "name input)

How would i achieve that?

modalrevealAJAXform

I would like to populate parts of a modal with an input of a form.

Example:
Form on my site with a "name" input
User fills out form, hits "submit" and modals opens
User gets greeted by Hello, "name"! (where name is the data from the "name input)

How would i achieve that?

Darek Wędrychowski almost 5 years ago

As I see it, it's not a Foundation related thing - Foundation can only provide you with a method to show or hide modal, but what is the modal's content is a totally different matter.

If the modal gets the data from input field, not from the backend, then it's also not AJAX related question.

You either achieve it by using JQuery / pure Javascript or a framework like Angular, Ember or other providing double data binding functionality. If you specify what is used by your project and include your HTML for form and modal, somebody may help you to write such a feature.

James Stone almost 5 years ago

You can accomplish that with jQuery. Just put a class or id in your modal like and replace it with jQuery. Lets say your input id is #firstNameInput

$("#firstNameInput").change( function() {
$("#replaceFirstName).html($(this).val());
});

Good luck!

Dennis Kortsch almost 5 years ago

Thanks for the answers! I know this is quite trivial with jquery BUT in my case the modal doesnt exist at the moment where the first form is filled in. Isnt there a "foundation" way of getting data into a modal?

Darek Wędrychowski almost 5 years ago

In Angular / Ember the modal isn't required to exist at the moment you fill the form, as the value is kept in the $scope object.

You can just get the value from

<input ng-model="username">

and use it whenever you want, f.e. in:

<modal>
your username is: {{username}}
</modal>

James Stone almost 5 years ago

The modal always exists unless you load via ajax. It is just hidden via css display:none. You can change it dynamically and then show it.