Submit form within Bootstrap modal within Form...?

Question

I have a form that allows users to log details. One element of that form is to select a particular user. If that user is not there, I want to be able to create a modal to create a new user, submit that new user to the database and then have that user available in the drop down list for all users. I'm using MVC 4 and Twitter Bootstrap framework. Any suggestions on how to do this?

I'm able to create the layout and it all displays fine, but the main issue at the moment is that when I submit the form inside the modal it doesn't pass the model data through to the controller on submission. Is that due to the fact that you can't have forms within forms? Shouldn't I have had other issues if that's the case?

Any help or guidance would be greatly appreciated. Thanks!

Answer 1

The problem is that you wrap the modal with the form, that is the reason why it does not submit.

You should put the form in the modal body, it will work.

Answer 2

I actually solved the issue by putting the second form (for the modal) outside the main form and created a partial view to create the modal div (and drop down list to be updated by the modal) back inside the main form. That way, when the code renders in html for there are two distinctly separate forms. When the second form (which is inside the modal) submits it's data I get it to redirect to the main view. That way, the information that the modal adds to the main view is then submitted and available for use.

I hope this makes sense to people. I'm pretty new to MVC so am hacking away blindly!

Answer 3

Have a look at this answer where I show how to use a Bootstrap modal with a form, there should be enough in it to get you on track:

MVC 4 Edit modal form using Bootstrap