Question

Let’s say we have an edit form to create a new user. Now the save button is placed in a different section, the footer.

My problem is that I can’t get the edit fields and the save button in one form, because the button is in a different section.

Because of that, I can’t submit the form.

What is the best approach to this problem?

_Layout.cshtml

<div class="content">
    @RenderBody()
</div>
<div class="footer">
    @RenderSection("Footer")
</div>

Index.cshtml

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Footer
{
    <input type="submit" value="Save" />
}

@using(Html.BeginForm())
{
    <h2>New User</h2>
    @Html.EditorForModel()
}

Answer 1

I found a workaround for my problem. It’s not nice, but it works.

I replaced the submit button with an anchor. When the anchor is clicked, a javascript function gets called.

<a name="save" onclick="submitAction(this)"></a>

The javascript function creates a hidden submit button in the form and clicks it.

function submitAction(sender) {
    var action = $(sender).attr('name');
    $('form').append('<input type="submit" style="display:none" id="tmpSubmit" />');
    $('#tmpSubmit').attr('name', action);
    $('#tmpSubmit').click();
}