Multiple forms in one page MVC 5

Question

i have a MVC 5 application, in the footer i have a "subscribe to newsletter" form, the problem is that when i try to sumbit another form (register user, ...), the form in the footer is also submitted, how can i resolve the problem,

<form id="newsletter-signup" action="@Url.Action("_SubscribeNewsletter", "Home")" method="post">

[HttpPost]
public ActionResult _SubscribeNewsletter(SubscribeNewsletterViewModel model)
{

@using (Html.BeginForm("Create", "Property", null, FormMethod.Post, new { @encType = "multipart/form-data", @id = "my-awesome-dropzone", @class = "add-estate", role = "form" }))
{

Thanks

Answer 1

You can use such kind of method by defining which form will be submitted to which controller action method.

@using(Html.BeginForm("Login", "Controller", FormMethod.Post, new { id = "loginForm"}))
 {
       @Html.EditorFor(m => Model.Login)
 }

Answer 2

If you don't need to show few forms at once you can try to hide the div containing the form, that way it will be like it doesn't exist and you shouldn't have problems, Also try to add a name attribute to your forms and check that the submit button is Inside the form it belongs.

here is a little sample of multiple forms in one html page I made, Im using javascript to work on it and handle the show-hide mechanism but you should be able to manage it with only css

<div class="ElementInformations" id="server">
            <h2>Server Informations</h2>
            <br />
            <form id="svform" action="">
                <table>
                    ...
                </table>
                <br />
                <input type="hidden" name="PrevSvid" id="PrevSvid" value="PrevSvid" />
                <input class="content-button" type="button" onclick="putServerForm();" value="Save Server Changes" />
                <br />
                <br />
                <input class="content-button" type="button" onclick="addDatabasePanel();" value="Add Database Panel" />
                <br />
                <br />
                <input class="content-button" type="button" onclick="deleteServer();" value="Delete Server" />
            </form>
            <form id="newdatabaseform" action="">
                <br />
                <h2>Add Database</h2>
                <br />
                <table>
                    ...
                </table>
                <br />
                <input type="hidden" id="NewServerId" name="ServerId" value="NewServerId" />
                <input class="content-button" type="button" onclick="addDatabase();" value="Add Database" />
            </form>
        </div>
        <div class="ElementInformations" id="database">
            <h2>Database Informations</h2>
            <br />
            <form id="dbform" action="">
                <table>
                    ...
                </table>
                <br />
                <h2>Database Translation</h2>
                <br />
                <table>
                    ...
                </table>
                <br />
                <input type="hidden" name="prevdbid" id="prevdbid" value="prevdbid" />
                <input class="content-button" type="button" onclick="putDatabaseForm();" value="Save database modifications" />
                <br />
                <br />
                <input class="content-button" type="button" onclick="deleteDatabase();" value="Delete Database" />
            </form>
        </div>
        <div id="NewServerPanel">
            <h2>Add Server</h2>
            <form id="newsvform" action="">
                <table>
                  ...
             </table>
                <br />
                <input class="content-button" type="button" onclick="addServer();" value="Add Server" />
                <br />
            </form>
        </div>