Question

System I working on is CMS where you insert templates like Contact form template and save that to database. This template is coded against server side to process data.

Now my “contentDiv” within form where all the templates were insert and saved than showed on the page withint form tag wrapped like

@using (Html.BeginForm("Edit", "Home", FormMethod.Post, new { id = "first" }))
{
    @Html.Hidden("someId", @Model.PageId)

}

<div id="contentDiv"  style="width:100%">@Html.Raw(Model.Html)</div>

Above form is than saved as

$(function () {
    $("form#first").submit(function (e) {
        e.preventDefault();

        var viewmodel = {
            Id: $("#someId").val(),
            Html: $("#contentDiv").val()
        };

        $.ajax({
            url: $(this).attr("action"),
            type: "POST",
            data: JSON.stringify(viewmodel),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            beforeSend: function () { $("#status").fadeIn(); },
            complete: function () { $("#status").fadeOut(); },
            success: function (data) {
                var message = data.Message;

            },
            error: function () {

            }
        });
    });
});

notice that I moved “contentDiv out of form tag as my contact form which is wrapped in a form tag can not be nested within id=first form.

Is there a solution to form nesting? . If not than

My another question is

contentDiv is not wrapped up in form tag that means if client browser has javascript disabled than he wont be able to post contentDiv data to server and form will be of no use.

What to do?

If I don’t move contentDiv out of form tag than than after inserting template the structure will be nesting of forms

@using (Html.BeginForm("Edit", "Home", FormMethod.Post, new { id = "first" }))
    {
<form id="contactform" action="/Home/Email"  method="post" >                
    <div class="clear" style="padding-bottom:10px;"></div>

    <div class="formCaption">Full Name</div>
    <div class="formField"><input id="fullName" name="fullName" class="standardField" /></div>




    <div><input id="sendBtn" value="Send" type="button" /></div>
</form> 
}

Answer 1

I didn’t understand from your description why the html needs to be outside the form. Also you should not use the .val() method for divs. You should use .html():

var viewmodel = {
    Id: $("#someId").val(),
    Html: $("#contentDiv").html()
};

Of course because you are using javascript to fetch the html which is outside of the main form if client browser has javascript disabled the form will be of no use. Only if you move the html inside the main form would this work without javascript:

@using (Html.BeginForm("Edit", "Home", FormMethod.Post, new { id = "first" }))
{
    @Html.HiddenFor(x => x.PageId)
    @Html.HiddenFor(x => x.Html)
    <input type="submit" value="Edit" />
}

<!-- 
You could still keep the div for preview or something but don't make 
any use of it when submitting.
-->
<div id="contentDiv" style="width:100%">
    @Html.Raw(Model.Html)
</div>