CODEWITHSUNDEEP
asp.netasp.net-mvc-4
Mat
Mat

Reputation: 37

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

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.

Upvotes: 0

Views: 3700

Answers (2)

Markis
Markis

Reputation: 1813

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.

Upvotes: 1

bitwiser
bitwiser

Reputation: 221

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

Upvotes: 1

Related Questions