I have 2 forms on a single razor view that open in seperate dialog boxes. The forms are submitted using jquery post..

First form works perfectly but the second form isnt recognised at all and when I try to serializr the data it returns an empty string.

Code below:

@using (Html.BeginForm("SaveElectricReading", "Store", FormMethod.Post, new { id = "frmSaveElectricReading" }))
{
    <div id="electricDialog" style="display: none;" title="Electric Readings">
        <p>
            Please ensure the electric readings have been entered!
        </p>
        <table width="100%">
            <tr>
                <th>
                    Serial:
                </th>
            </tr>
            <tr>
                <td>
                    <input type="text" name="Serial" />
                </td>
            </tr>
            <tr>
                <th>
                    Reading:
                </th>
            </tr>
            <tr>
                <td>
                    <input type="text" name="Reading" />
                </td>
            </tr>
            <tr>
                <th>
                    Comment:
                </th>
            </tr>
            <tr>
                <td>
                    <div class="textwrapper">
                        <textarea rows="5" cols="10" name="Comment"></textarea>
                    </div>
                </td>
            </tr>
        </table>
    </div>
}

@using (Html.BeginForm("SaveWaterReading", "Store", FormMethod.Post, new { id = "myform" }))
{
    <div id="waterDialog" style="display: none;" title="Water Readings">
        <p>
            Please ensure the water readings have been entered!
        </p>
        <table width="100%">
            <tr>
                <th>
                    Serial:
                </th>
            </tr>
            <tr>
                <td>
                    <input type="text" name="WaterSerial" />
                </td>
            </tr>
            <tr>
                <th>
                    Reading:
                </th>
            </tr>
            <tr>
                <td>
                    <input type="text" name="WaterReadingsdfsdf" />
                </td>
            </tr>
            <tr>
                <th>
                    Comment:
                </th>
            </tr>
            <tr>
                <td>
                    <div class="textwrapper">
                        <textarea rows="5" cols="10" name="WaterComment"></textarea>
                    </div>
                </td>
            </tr>
        </table>
    </div>
}

function showWaterDialog() {
    var $dialog = $('#waterDialog').dialog({
        autoOpen: false,
        modal: true,
        width: 400,
        height: 400,
        buttons: {
            Submit: function () {
                //                $('#frmCreateStore').submit();
                var data = $('#frmSaveWaterReading');

                $.post("/Store/SaveWaterReading",
                    $("#frmSaveWaterReading").serialize(),
                    function () {
                        $("#waterDialog").dialog("close");
                    });
                //$(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });

    $dialog.dialog('open');
}

• asp.net-mvc
• jquery
• c#-4.0

In the jquery function for showing the dialog with the form in it, I needed to add that dialog content to the second form on the page as follows:

$("#waterDialog").parent().appendTo($("form").eq(1)[0]);