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

when you are submitting form of subscribe to newsletter make sure you are using a proper selector in jquery..like this..$("#newsletter-signup").submit() without affecting the other forms... — Kartikeya Khosla
– Kartikeya Khosla, Commented Nov 3, 2014 at 9:51

Pang · Accepted Answer · 2016-11-25 06:17:30Z

3

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)
 }

edited Nov 25, 2016 at 6:17

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Nov 25, 2016 at 5:56

user6243946

Sign up to request clarification or add additional context in comments.

Comments

Charlie · Accepted Answer · 2014-11-03 09:24:50Z

1

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>

answered Nov 3, 2014 at 9:24

Charlie

1776 bronze badges

3 Comments

Saidi omar Over a year ago

<form id="newsletter-signup" action="@Url.Action("_SubscribeNewsletter", "Home")" method="post"> <p> @Html.TextBoxFor(model => model.Email, new { @id = "mc4wp_email" }) <button type="submit" id="signup-button" class="signup-button"><i class="fa fa-check"></i></button> </p> <div id="signup-response" class="signup"></div> </form>

Charlie Over a year ago

The problem with MVC is that you can't really dissociate 2 elements in one view since the model is binded and you will always have everything in it even if you need only half, to add modularity consider using javascript to format a model before posting it server side, checkout jquery or angularjs if you are used to javascript

Anmol Rathod Over a year ago

how can i get the value of single form i.e. get the values of only newdatabaseform form ?

Collectives™ on Stack Overflow

Multiple forms in one page MVC 5

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related