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.

Not related but you seem to be including the validation scripts twice (via the bundle, and the manual script tags) — user3559349
And you should be doing this with a submit button and handling the .submit() event (and canceling it if your validation fails). Or simply using the $.ajax() methods rather than the obsolete Ajax.BeginForm — user3559349
I've removed Ajax.Begin form and discovered that my script has to be placed AFTER the modal popup. So now I'm in the click event, but my $.ajax() is always reaching the error function. — Brad
For a start its data: { ID: id }, (no parenthesis), and your also not doing anything in the success callback (as per your first update — user3559349
And you should learn to use your browser tools to debug your code (e.g. inspect the response in the Network tab to see the details of the error) — user3559349

Brad Brad · Accepted Answer · 2017-09-14T14:05:00

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>

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

1 Answers