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
– Fals, Commented Jun 24, 2013 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
– Mat, Commented Jun 25, 2013 at 1:16
Both links submit #loginForm. Change the form selector for troubleSubmitlink handler. — Jasen
– Jasen, Commented Jun 25, 2013 at 1: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
– Mat, Commented Jun 25, 2013 at 1:36

bitwiser · Accepted Answer · 2013-06-25 02:24:32Z

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, 2013 at 2:24

bitwiser

2212 silver badges9 bronze badges

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

1 Comment

Mat Over a year ago

Thanks bitwiser, the capital was the cause of the 2nd form not sumitting.

Markis · Accepted Answer · 2013-06-25 02:41:05Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related