title: Ajax.BeginForm in Bootstrap Modal submitting twice
body: <p>I have a page that calls a Bootstrap Modal dialog containing a form. The form is rendered via the ASP.NET Razor Htmlelpers, specifically I am calling the Ajax.BeginForm() method. I have not added any additional customer javascript to the submit button's click event.</p>
  
  <p>When I click on the submit button, it appears that both the Bootstrap and the ASP.NET Helpers are attaching code to the form's submit button event, causing the form to post twice. I am using Bootstrap for my site layout, and I have chosen to use the Ajax helpers to be able to use ASP.NET validations in my view, and have the appropriate code to post the form back to the action handled for me. </p>
  
  <p>How can I stop the Bootstrap code from executing (halting the double post), but retain the Ajax Helper code (keeping the valiations)? </p>
  
  <p>Here is the page's razor/html layout</p>
  
  <pre><code>@model Valkyrie.Web.Models.Tickets.TicketHistoryViewModel
  
  @{
      ViewBag.Title = String.Format("{0} Ticket History", Model.DisplayName);
  }
  @Scripts.Render("~/bundles/jquery")
  @Scripts.Render("~/bundles/jqueryval")
  &lt;style&gt;
      div.list-group-item {
          color: #000;
      }
  
      #myModal {
          color: #000;
      }
  &lt;/style&gt;
  
  
  &lt;div class="list-group"&gt;
      @foreach (var ticket in Model.Tickets)
      {
          &lt;div class="list-group-item"&gt;
  
              &lt;div class="pull-right"&gt;
                  TT: #@ticket.TicketId.ToString().PadLeft(7, '0') &lt;br /&gt;
                  Opened @ticket.DateCreated.ToShortDateString()
                  &lt;br /&gt; @ticket.OpenedBy
              &lt;/div&gt;
              &lt;div style="clear: both; padding-bottom: 10px;"&gt;
                  @ticket.Interactions[0].InteractionTypeId &lt;br /&gt;
                  @ticket.Interactions[0].Notes
              &lt;/div&gt;
              &lt;div class="pull-left"&gt;
                  &lt;a href="#"&gt;@(ticket.Interactions.Count-1) follow ups&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="pull-right"&gt;
                  &lt;a href="#myModal" role="button" data-toggle="modal" data-ticket="@ticket.TicketId" class="btn btn-success btn-pop"&gt;Add Follow Up&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="clearfix"&gt;&lt;/div&gt;
          &lt;/div&gt;
      }
  &lt;/div&gt;
  &lt;!-- Modal --&gt;
  &lt;div id="myModal" class="modal fade" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;Add Followup&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
  
                  @using (Ajax.BeginForm("Interaction", "Ticket", new AjaxOptions { AllowCache = false, HttpMethod = "POST", OnSuccess = "doubleStuff" }))
                  {
                        &lt;div class="form-horizontal"&gt;
              @Html.ValidationSummary(true, "", new { @class = "text-danger" })
              @Html.HiddenFor(model =&gt; model.InteractionId)
              @Html.HiddenFor(model =&gt; model.TicketId, new { @class = "ticket-id" })
              @Html.HiddenFor(model =&gt; model.UserId)
  
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.InteractionTypeId, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.DropDownListFor(model =&gt; model.InteractionTypeId, new SelectList(Model.InteractionTypes, "Value", "Text"), "Select", new { @class = "form-control" })
                      @Html.ValidationMessageFor(model =&gt; model.InteractionTypeId, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.Phone, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.EditorFor(model =&gt; model.Phone, new { htmlAttributes = new { @class = "form-control" } })
                      @Html.ValidationMessageFor(model =&gt; model.Phone, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.EditorFor(model =&gt; model.Email, new { htmlAttributes = new { @class = "form-control" } })
                      @Html.ValidationMessageFor(model =&gt; model.Email, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.Notes, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.TextAreaFor(model =&gt; model.Notes, new { @class = "form-control", rows = 10 })
                      @Html.ValidationMessageFor(model =&gt; model.Notes, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
  
                      &lt;div class="modal-footer"&gt;
                          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                          &lt;button type="submit" id="submit_button_1" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
                      &lt;/div&gt;
                  }
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  @section Scripts {
  &lt;script type="text/javascript"&gt;
  
      var fobj = {};
      fobj.InteractionTypeId = $('#InteractionTypeId');
      fobj.TicketId = $('#TicketId');
      fobj.UserId = $('#UserId');
      fobj.Phone = $('#Phone');
      fobj.Email = $('#Email');
      fobj.Notes = $('#Notes');
  
      function doubleStuff(data) {
          alert(data.HasErrors);
      }
  
      $(document).ready(function () {
          $(".btn-pop").on("click", function (event)
          {
              var button = $(this);
              var ticketId = button.data('ticket');
              $('.ticket-id').val(ticketId);
              fobj.Phone.val('');
              fobj.Email.val('');
              fobj.Notes.val('');
              fobj.InteractionTypeId.val('');
  
          });
  
          //$('#submit_button_1').on("click",
          //    function (event) {
  
          //    });
  
      });
  
  
  
  &lt;/script&gt;
  }
  </code></pre>