Handling multi-forms in one View in ASP.NET MVC 4

Question

Hi I have a problem with my page. I have one view page and 2 forms in the same page. I have seen and tried different approaches (like this one => asp.net MVC 4 multiple post via different forms) but I noticed a difference from my issue.

The problem is that I have a main form and another form which is a shown by JQuery. On initial display it is not shown but when they click a link, the second form is shown as a modal dialog box. When I click the button in that box is does not seem to work.

I need your help on this please!

Edited:

Below are the codes I used in my application.

.CSTHML Forms

@using (Html.BeginForm("Login2", "Account", FormMethod.Post, new { @id = "loginForm" }))
{
    <a id="submitlink" href="#" class="button button-large">Sign In</a>
}

@using (Html.BeginForm("TroubleSubmit", "Account", FormMethod.Post, new { @id = "troubleSubmitForm" }))
{
    <a id="troubleSubmitLink" href="#" class="button">OK</a>
}

JQUERY

$('a#submitlink').click(function () {
            $('#loginForm').submit();
        });

$('a#troubleSubmitlink').click(function () {
            $('#troubleSubmitForm').submit();
        });

The first form is working correctly. However, when I click the 'OK' button of the second form nothing seems to be happening.

Could you post some code (View, Controller, JavaScript)? This will help us to analize and solve the issue! — Fals, Jun 24 '13 at 16:50
I have updated the post to contain the codes. I want the form to submit to different Actions in the Controller. I have tried to have the same Action for both forms but it's still doesn't seem to work. Maybe it's just me coz I'm new to ASP.NET MVC. — Mat, Jun 25 '13 at 01:16
Both links submit `#loginForm`. Change the form selector for `troubleSubmitlink` handler. — Jasen, Jun 25 '13 at 01:20
Hi Jasen, sorry but it was an error on my part. You see I have been testing around different scenarios to see where the post will go when I submit the second form. I have corrected the code accordingly. Thanks for pointing out by the way! — Mat, Jun 25 '13 at 01:36

score 1 · Accepted Answer · answered Jun 25 '13 at 02:24

1

Your anchor tag's id has a capitol L on Link, while your jquery selector uses lower case. I believe selectors are case sensitive.

answered Jun 25 '13 at 02:24

bitwiser

221
2
9

Thanks bitwiser, the capital was the cause of the 2nd form not sumitting. – Mat Jun 25 '13 at 15:39

score 1 · Answer 2 · answered Jun 25 '13 at 02:41

To add to bitwiser's response.

If you do something like this with your JQuery

$(document).on("click", "a[href='#Submit']", function(event) {
    $(event.currentTarget).closest("form").submit()
});

Then you can do this with your html forms (note the hrefs, "#Submit"):

@using (Html.BeginForm("Login2", "Account", FormMethod.Post, new { @id = "loginForm" }))
{
    <a id="submitlink" href="#Submit" class="button button-large">Sign In</a>
}

@using (Html.BeginForm("TroubleSubmit", "Account", FormMethod.Post, new { @id = "troubleSubmitForm" }))
{
    <a id="troubleSubmitLink" href="#Submit" class="button">OK</a>
}

With the jquery above, you don't need to setup individual click handlers for each link inside of a form. You can just set the href to #Submit and the one global handler will take care of submitting.

Handling multi-forms in one View in ASP.NET MVC 4

2 Answers2