title: Ajax call if textarea not in form with form nesting problem as well
body: <p>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. </p>
  
  <p>Now my "contentDiv" within form where all the templates were insert and saved than showed on the page withint form tag wrapped like</p>
  
  <pre><code>@using (Html.BeginForm("Edit", "Home", FormMethod.Post, new { id = "first" }))
  {
      @Html.Hidden("someId", @Model.PageId)
  
  }
  
  &lt;div id="contentDiv"  style="width:100%"&gt;@Html.Raw(Model.Html)&lt;/div&gt;
  </code></pre>
  
  <p>Above form is than saved as </p>
  
  <pre><code>$(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 () {
  
              }
          });
      });
  });
  </code></pre>
  
  <p>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.</p>
  
  <p><strong>Is there a solution to form nesting?</strong> . If not than</p>
  
  <p><strong>My another question is</strong></p>
  
  <p>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.</p>
  
  <p>What to do?</p>
  
  <p>If I don't move contentDiv out of form tag than than after inserting template the structure will be nesting of forms</p>
  
  <pre><code>@using (Html.BeginForm("Edit", "Home", FormMethod.Post, new { id = "first" }))
      {
  &lt;form id="contactform" action="/Home/Email"  method="post" &gt;                
      &lt;div class="clear" style="padding-bottom:10px;"&gt;&lt;/div&gt;
  
      &lt;div class="formCaption"&gt;Full Name&lt;/div&gt;
      &lt;div class="formField"&gt;&lt;input id="fullName" name="fullName" class="standardField" /&gt;&lt;/div&gt;
  
  
  
  
      &lt;div&gt;&lt;input id="sendBtn" value="Send" type="button" /&gt;&lt;/div&gt;
  &lt;/form&gt; 
  }
  </code></pre>