How do I submit Ajax form from javascript and update target div?

Question

I have a bootstrap modal popup, with an ajax helper form on which I need to do some js validation prior to submitting. If validation fails, I'm showing some extra things on the form. If my validation passes I want to submit the form, and update a specific div with a PartialView. To do the validation, I'm calling a js function from a button on the form, and passing in the form. If my validation passes, I call the form's submit.

This works, but the PartialView displays full page, rather than in the target div. The form works properly and updates the target div when I submit directly from a submit input on the form instead of submitting from the js function.

How do I update my target div when submitting from js function?

See code:

function validateActionItem(sender) {
  var $formToSubmit = $(sender).closest('form');
  $formToSubmit.submit();
}


<div id="MyDivContainer" class="col-lg-12">
   @Html.Action("MyPartial", "MyController", new { ID = Model.ID })

<div class="modal fade" id="MyModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      @using (Ajax.BeginForm("MyAction", "MyController", 
        new { ID = Model.ID }, 
        new AjaxOptions { 
          UpdateTargetId = "MyDivContainer",
          OnSuccess = "closeModal()" 
        }, 
        new { @id = "MyForm"}))
      {
        <div class="modal-body">

        <!-- My form fields -->

        </div>
        <div class="modal-footer">
          <button class="btn btn-primary" role="button"
            type="button" onclick="validate($(this))">
            Validate Submit
          </button>     
        </div>
      }
    </div>
  </div>
</div>

My _Layout.cshtml contains...

@Scripts.Render("~/bundles/jquery")
     
    @Scripts.Render("~/bundles/jqueryval")

    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

The MyAction action returns PartialView(model).

Can anyone point to what I'm doing wrong, and why my PartialView displays full page when submitting the form from javascript but properly updates the target div when I replace the button with a regular input submit on the form?

UPDATE

I have refactored the submit like so, but it's never getting called for some reason?

jQuery().ready(function () {
        $("#MyForm").submit(function (e) {

            $.ajax({
                url: "/MyController/MyAction",
                type: "POST",
                dataType: "html",
                contentType: false,
                data: $("#MyForm").serialize(),
                success: function (partialViewResult) {
                    closeModal();
                    $("#MyDivContainer").empty().append(partialViewResult);
                }

            });
        });
    });

UPDATE 2

I discovered that the jquery script must be after the modal popup in my cshtml, so now I'm reaching the submit event of my input button. However, I can't get to my controller action... the ajax call errors.

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

        var id = $('#ID').val();
        alert("submit function called");
        alert("ID: " + id);

        $.ajax({
            url: "/MyController/MyAction",
            type: "POST",
            dataType: "html",
            data: { ID: (id)},
            error: alert("Error!")
        });
    });

I hit the "Error" alert, and don't know how to debug this to figure out what's wrong.

Answer 1

I've got it working. Thanks everyone for the help. Here's the code:

For whatever reason, the script has to be placed after the modal popup markup.

<script type="text/javascript">
    $("#MyForm").submit(function (e) {
        e.preventDefault();

        //getting fields to be checked
        
        if //checking failed validations
        {
            //doing some things if val fails
        }
        else
        {
            var id = $('#ID').val();
            
            $.ajax({
                url: "/MyController/MyAction",
                type: "POST",
                dataType: "html",
                data: {ID: id},
                success: function (partialViewResult) {
                    closeMyModal();
                    $("#MyDivContainer").empty().append(partialViewResult);
                }
            });
        }
    });
</script>