Call action depending on what button was clicked within form

Question

I have a log in/register form with a button for each function

<div id="ManualLogin">        
    @using (Html.BeginForm(new { Controller = "Companies", Action = "ManualLogOn" }))
    {            
        <fieldset>
            <legend>Enter details</legend>
            <div class="editor-label">
                @Html.LabelFor(u => u.Name)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(u => u.Name)                
            </div>
            <div class="editor-label">
                @Html.LabelFor(u => u.Password)
            </div>
            <div class="editor-field">
                @Html.PasswordFor(u => u.Password)                
            </div>

            <input type="submit" id="LogInButton" name="Command" value="Log in"/>
            <input type="submit" id="RegisterButton" name="Command" value="Register"/>

            <label id="ServerValidaiotnLabel">@ViewBag.Error</label>

        </fieldset>            
    }
</div>

How can I change this to make it call an action depending on what button was clicked. (Log in / Register)

Do you have to call different actions? Would it work if you passed a parameter to the server and there decided what to do based on the parameter? Here's a similar question with some examples http://stackoverflow.com/questions/442704/how-do-you-handle-multiple-submit-buttons-in-asp-net-mvc-framework — Niklas, Jun 27 '13 at 13:48

YD1m · Answer 1 · 2013-06-27T14:24:20.330

You can toggle form action on buttons click and submit form manually. Here sample:

Changes in form markup:

<buttom id="LogInButton" data-action="@Url.Action("login", "user")" class="Command">Log in</button>
<button id="RegisterButton" data-action="@Url.Action("register", "user")" class="Command"></button>

jQuery:

<script type="text/javascript">

        (function($){

        $('form button.Command').on('click', function() {
              var url = $(this).data('action');
              $(this).closest('form').attr('action', url).submit();
        });

        })(jQuery)

</script>

Call action depending on what button was clicked within form

1 Answers1