Question

I have a certain ajax form and when submitted I want to include another form outside of that ajax form. Let me show you an example:

    @using (Ajax.BeginForm("PayWithBankTransfer", "Payment", new { salesLineId = salesLine.SalesLineID }, new AjaxOptions
                                                                                                                    {
                                                                                                                        HttpMethod = "POST",
                                                                                                                        UpdateTargetId = "bankForm",
                                                                                                                        LoadingElementId = "spinnerBank"
                                                                                                                    }, new { id = "feedback-form" }))
{
    //some stuff
    <button type="submit">Reserve</button>
}

I have another tag outside of the form I want to include in the ajax form submission

<div id="theOtherStuff">
    //otherStuff
</div>

How could I submit the other stuff along with the ajax form?

Answer 1

I don’t think that MS unobtrusive AJAX supports this. So let’s get rid of it and use plain jQuery. The .serialize() method is what you are looking for.

So we start by replacing the Ajax.BeginForm form with a regular Html.BeginForm

@using (Html.BeginForm(
    "PayWithBankTransfer", 
    "Payment", 
    new { salesLineId = salesLine.SalesLineID }, 
    FormMethod.Post,
    new { id = "feedback-form" })
)
{
    //some stuff
    <button type="submit" class="t-button t-state-default" style="width: 100px; height: 50px;">Reserver</button>
}

then we provide an id to the other form so that we can reference it in our script:

<div id="theOtherStuff">
    @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "theOtherStuffForm" }))
    {
        //otherStuff
    }
</div>

and all that’s left is write our script in a separate javascript file to unobtrusively AJAXify this form:

$(function() {
    $('#feedback-form').submit(function () {
        $('#spinnerBank').show();
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).add('#theOtherStuffForm').serialize(),
            success: function (result) {
                $('#bankForm').html(result);
            },
            complete: function () {
                $('#spinnerBank').hide();
            }
        });

        return false;
    });
});

The following line should be of particular interest:

data: $(this).add('#theOtherStuffForm').serialize(),

As you can see the .serialize method allows convert multiple forms into suitable serialized form.

It is more than obvious that you should not have conflicting names with the input elements of the 2 forms (for example have 2 elements with the same name), otherwise the default model binder could go berserk. It’s up to you to resolve those conflicts if there are any.