爲什麼我的ChildForm tyring中的提交按鈕發佈主窗體？

Question

這是我認爲它有1個主窗體，裏面包含3個子窗體。

@*MainForm*@ 
@using(Html.BeginForm("Create_SelectPersons","Appointment", FormMethod.Post)) 
{ 
    @Html.AntiForgeryToken() 
    <h4>Step 2</h4> 
    <hr /> 
    @Html.ValidationSummary() 
     @*Child Form1*@ 
     using(Ajax.BeginForm("AddAttendeeManual", "Attendee", new AjaxOptions { HttpMethod = "POST", OnSuccess = "doneManualEmail" })) 
     { 
      @Html.HiddenFor(m=>m.SelectedManualEmail.AppointmentId) 
      <div class="form-group"> 
       @Html.LabelFor(m => m.SelectedManualEmail.Email, new { @class = "col-md-2 control-label" }) 
       <div class="col-md-8 input-group"> 
        @Html.TextBoxFor(m => m.SelectedManualEmail.Email, new {@class = "form-control",PlaceHolder="Email"}) 
        //button below tries to submit entire form(main) and not the child form 
        <input type='submit' class="btn btn-default" value="Add>>" /> 
       </div> 
      </div> 
     } 


     if (Model.IsSuperOfficeConnected) 
     { 
      @*Child Form2*@ 
      using(Ajax.BeginForm("AddAttendeeSuperOffice","Attendee",new AjaxOptions{HttpMethod = "POST", OnSuccess = "done"})) 
      { 
       @Html.HiddenFor(m => m.SelectedSuperOfficeEmail.FirstName, new { id = "SelectedSuperOfficeEmail_FirstName" }) 
       @Html.HiddenFor(m => m.SelectedSuperOfficeEmail.LastName, new { id = "SelectedSuperOfficeEmail_LastName" }) 
       @Html.HiddenFor(m=>m.SelectedSuperOfficeEmail.AppointmentId) 
       @Html.HiddenFor(m => m.SelectedSuperOfficeEmail.SuperOfficePersonId, new { id = "SelectedSuperOfficeEmail_SuperOfficePersonId" }) 
       <div class="form-group"> 
        @Html.LabelFor(m => m.SelectedSuperOfficeEmail.Email, new { @class = "col-md-2 control-label" }) 
        <div class="col-md-8 input-group"> 
         @Html.TextBoxFor(m => m.SelectedSuperOfficeEmail.Email, new { id = "SelectedSuperOfficeEmail", @class = "form-control", PlaceHolder = "Search in SuperOffice" }) 

         <input type='submit' id="btnSuperOffice" class="btn btn-default" value="Add>>" /> 
        </div> 
       </div> 

      } 

     } 
     if (Model.IsInternalAddressBookEmpty) 
     { 
      @*Child Form3*@ 
      using(Ajax.BeginForm("AddAttendeeInternalAddressBook", "Attendee", new AjaxOptions { HttpMethod = "POST", OnSuccess = "done" })) 
      { 
       @Html.HiddenFor(m=>m.SelectedAddressBookPerson.FirstName) 
       @Html.HiddenFor(m=>m.SelectedAddressBookPerson.LastName) 
       @Html.HiddenFor(m=>m.SelectedAddressBookPerson.AppointmentId) 
       <div class="form-group"> 
        @Html.LabelFor(m => m.SelectedAddressBookPerson.Email, new { @class = "col-md-2 control-label" }) 
        <div class="col-md-8 input-group"> 
         @Html.TextBoxFor(m => m.SelectedAddressBookPerson.Email, new { id = "SelectedAddressBookPerson", @class = "form-control", PlaceHolder = "Search in AddressBook..." }) 

         <input type='submit' id="btnAddressBook" class="btn btn-default" value="Add>>"> 
        </div> 
       </div>    
      } 

     } 


     <div class="form-group"> 
     <div class="col-md-offset-2 col-md-10"> 
      <input class="btn btn-default" value="<<Previous"/> 
       //this button which i am expecting to submit the main form, does nothing 
      <input type="submit" class="btn btn-default" value="Next>>" /> 
     </div> 
    </div> 

} 


<style> 
    .ui-autocomplete-loading { 
     background: url('/Content/themes/base/images/ui-anim_basic_16x16.gif') no-repeat right center; 
    } 

</style> 
@section Scripts{ 
    @Scripts.Render("~/bundles/jqueryval") 
    @Scripts.Render("~/Scripts/jquery-ui-1.10.4.min.js") 
    @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js") 

    <script type="text/javascript">  
     $(function() { 

      $("#SelectedSuperOfficeEmail"). 
       autocomplete({ 
        source: '/Appointment/SuperOfficePerson', 
        minLength: 1, 
        select: function (event, ui) { 
         $('#SelectedSuperOfficeEmail').val(ui.item.value); 
         $(@Html.IdFor(m => m.SelectedSuperOfficeEmail.FirstName)).val(ui.item.FirstName); 
         $(@Html.IdFor(m => m.SelectedSuperOfficeEmail.LastName)).val(ui.item.LastName); 
         $(@Html.IdFor(m => m.SelectedSuperOfficeEmail.SuperOfficePersonId)).val(ui.item.ExternalPersonId); 
        } 

      }); 

      $("#SelectedAddressBookPerson").autocomplete({ 
       source: '/Appointment/AddressBookPerson', 
       minLength: 1, 
       select: function(event,ui) { 
        $(@Html.IdFor((m=>m.SelectedAddressBookPerson.FirstName))).val(ui.item.FirstName); 
        $(@Html.IdFor(m=>m.SelectedAddressBookPerson.LastName)).val(ui.item.LastName); 
       }, 
      }); 

     }); 
     function doneManualEmail() { 
      $(@Html.IdFor(m => m.SelectedManualEmail.Email)).val(''); 
     } 
     function done() { 
      $(@Html.IdFor(m=>m.SelectedSuperOfficeEmail.Email)).val(''); 
      $(@Html.IdFor(m=>m.SelectedAddressBookPerson.Email)).val(''); 
      $(@Html.IdFor(m=>m.SelectedManualEmail.Email)).val(''); 
     } 

    </script> 
} 

在爲Child Form1和Child Form3，當我點擊提交他們旁邊的按鈕，它提交的子窗體上面的代碼，但對於兒童Form1中當我點​​擊下一步按鈕，它不應該被它提交孩子的形式？

現在它正試圖提交郵件的形式。這是爲什麼？

和類型的下一步按鈕提交，爲主要形式什麼也不做，當我點擊它。

我應該如何解決這個問題？

編輯1：根據答案，我可以通過刪除的主要形式，並具有用於下一頁>>按鈕上點擊功能一個jQuery解決了這個問題。但那麼爲什麼第二和第三個孩子的形式工作，而不是第一個？

Answer 1

這不是有效的HTML。您可以使用多個表單，但不能使用嵌套表單。

來自官方的W3C XHTML specification prohibitions

形式不得含有其他表單元素。