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

i have bootstrap modal popup, ajax helper form on need js validation prior submitting. if validation fails, i'm showing things on form. if validation passes want submit form, , update specific div partialview. validation, i'm calling js function button on form, , passing in form. if validation passes, call form's submit.

this works, partialview displays full page, rather in target div. form works , updates target div when submit directly submit input on form instead of submitting js function.

how update target div when submitting 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">          <!-- 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 point i'm doing wrong, , why partialview displays full page when submitting form javascript updates target div when replace button regular input submit on form?

update

i have refactored submit so, it's never getting called 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 jquery script must after modal popup in cshtml, i'm reaching submit event of input button. however, can't controller action... 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 "error" alert, , don't know how debug figure out what's wrong.

i've got working. help. here's code:

for whatever reason, script has placed after modal popup markup.

<script type="text/javascript">      $("#myform").submit(function (e) {          e.preventdefault();            //getting fields checked                    if //checking failed validations          {              //doing 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>