How to post ASP NET MVC Ajax form using JavaScript rather than submit button

Question

I have a simple form created using Ajax BeginForm    lt   using  Ajax BeginForm  Update    Description   new   id   Model Id         new AjaxOptions               UpdateTargetId    DescriptionDiv          HttpMethod    post         new  id   AjaxForm         gt  Description   lt    Html TextBox  Description   Model Description    gt  lt br   gt   lt input type  submit  value  save    gt   lt      gt    The controller is wired up and returns a partial view that updates the DescriptionDiv  And it all works neatly   Now I would like to be able to submit this form without having the submit button  via a clik on a link or on an image or whatever   Unfortunately this little jQuery snippet does not do the job      form AjaxForm   submit      It does submit the form  but does  I suppose not surprisingly  a regular post-back and not an Ajax one   For the sake of simplicity the above jQuery is wired up like this    lt a href     onclick     form AjaxForm   submit    return false   gt submit lt  a gt    The form s onsubmit is using the Sys Mvc AsyncForm handleSubmit   but the jQuery submit seems to be bypassing this   PS  I am looking for a solution in this particular approach  I know how to achieve the same using a normal form and posting it using AJAX jQuery  I am interested in this particular solution though

User · Answer

I ve tried a few times to get the ajax form submit working nicely  but always met with either complete failure or too many compromises  Here s an example of page that uses the jQuery Form plug-in inside of a MVC page to update a list of projects  using a partially rendered control  as the user types in an input box    lt div class  searchBar  gt       lt form action   lt    Url Action   SearchByName     gt   method  get  class  searchSubmitForm  gt           lt label for  projectName  gt Search  lt  label gt           lt    Html TextBox   projectName     gt           lt input class  submit  type  submit  value  Search    gt       lt  form gt   lt  div gt   lt div id  projectList  gt       lt   Html RenderPartial   ProjectList   Model     gt   lt  div gt    lt script type  text javascript  gt      jQuery document  ready function             jQuery   projectName   keyup function                 jQuery   searchSubmitForm   submit                         jQuery   searchSubmitForm   submit function                 var options                     target     projectList                             jQuery this  ajaxSubmit options                return false                          We remove the submit button here - good Javascript depreciation technique         jQuery   submit   remove             lt  script gt    And on the controller side   public ActionResult SearchByName  string projectName        var service   Factory GetService lt IProjectService gt          var result   service GetProjects  projectName        if  Request IsAjaxRequest             return PartialView   ProjectList   result       else               TempData  Result     result          TempData  SearchCriteria     projectName           return RedirectToAction   Index             public ActionResult Index          IQueryable lt Project gt  projects      if  TempData  Result      null          projects    IQueryable lt Project gt  TempData  Result        else               var service   Factory GetService lt IProjectService gt              projects   service GetProjects                ViewData  projectName     TempData  SearchCriteria         return View  projects

User · Answer

Simply place normal button indide Ajax BeginForm and on click find parent form and normal submit  Ajax form in Razor    using  Ajax BeginForm  AjaxPost    Home   ajaxOptions                          lt div class  form-group  gt               lt div class  col-md-12  gt                    lt button class  btn btn-primary  role  button  type  button  onclick  submitParentForm   this    gt Submit parent from Jquery lt  button gt               lt  div gt           lt  div gt          and Javascript   function submitParentForm sender        var  formToSubmit     sender  closest  form          formToSubmit submit

User · Answer

Try the following way    lt input type  submit  value  Search  class  search-btn    gt   lt a href  javascript    onclick      search-btn   click     gt Go lt  a gt

User · Answer

Ajax BeginForm looks to be a fail   Using a regular Html Begin for  this does the trick just nicely       detailsform   submit function e        e preventDefault          post   this  attr  action      this  serialize    function r                edit   html r

User · Answer

A simple example  where a change on a dropdown list triggers an ajax form-submit to reload a datagrid    lt div id  pnlSearch  gt        lt   using  Ajax BeginForm  UserSearch    Home   new AjaxOptions   UpdateTargetId    pnlSearchResults     new   id  UserSearchForm              gt           UserType   lt    Html DropDownList  FilterUserType   Model UserTypes   --   new   onchange        UserSearchForm   trigger  submit         gt        lt       gt    lt  div gt    The trigger  onsubmit   is the key thing  it calls the onsubmit function that MVC has grafted onto the form   NB  The UserSearchResults controller returns a PartialView that renders a table using the supplied Model   lt div id  pnlSearchResults  gt       lt   Html RenderPartial  UserSearchResults   Model     gt   lt  div gt

User · Answer

Rather than using JavaScript perhaps try something like    lt a href     gt      lt input type  submit  value  save  style  background  transparent none  border  0px none  text-decoration  inherit  color  inherit  cursor  inherit    gt    lt  a gt

User · Answer

Unfortunately triggering the onsubmit or submit events wont work in all browsers    Works in IE and Chrome     form ajaxForm  trigger  onsubmit    Works in Firefox and Safari     form ajaxForm  trigger  submit      Also  if you trigger  submit   in Chrome or IE  it causes the entire page to be posted rather than doing an AJAX behavior    What works for all browsers is removing the onsubmit event behavior and just calling submit   on the form itself    lt script type  text javascript  gt    function             form ajaxForm   submit function event             eval   this  attr  onsubmit     return false                       form ajaxForm   find  a submit-link   click  function                form ajaxForm   submit                      lt  script gt     lt   using  Ajax BeginForm  Update    Description   new   id   Model Id         new AjaxOptions               UpdateTargetId    DescriptionDiv          HttpMethod    post          new   id    ajaxForm          gt     Description      lt    Html TextBox  Description   Model Description    gt  lt br   gt      lt a href     class  submit-link  gt Save lt  a gt    lt       gt    Also  the link doesn t have to be contained within the form in order for this to work

User · Answer

I m going to assume that your lack of quotes around the selector is just a transcription error  but you should check it anyway   Also  I don t see where you are actually giving the form an id   Usually you do this with the htmlAttributes parameter   I don t see you using the signature that has it  Again  though  if the form is submitting at all  this could be a transcription error   If the selector and the id aren t the problem I m suspicious that it might be because the click handler is added via markup when you use the Ajax BeginForm extension   You might try using    form   trigger  submit   or in the worst case  have the click handler on the anchor create a hidden submit button in the form and click it   Or even create your own ajax submission using pure jQuery  which is probably what I would do    Lastly  you should realize that by replacing the submit button  you re going to totally break this for people who don t have javascript enabled   The way around this is to also have a button hidden using a noscript tag and handle both AJAX and non-AJAX posts on the server   BTW  it s consider standard practice  Microsoft not withstanding  to add the handlers via javascript not via markup   This keeps your javascript organized in one place so you can more easily see what s going on on the form   Here s an example of how I would use the trigger mechanism       function              form ajaxForm   find  a submit-link   click  function                   form ajaxForm   trigger  submit             show          lt   using  Ajax BeginForm  Update    Description   new   id   Model Id         new AjaxOptions               UpdateTargetId    DescriptionDiv          HttpMethod    post          new   id    ajaxForm          gt     Description      lt    Html TextBox  Description   Model Description    gt  lt br   gt      lt a href     class  submit-link  style  display  none   gt Save lt  a gt      lt noscript gt          lt input type  submit  value  Save    gt      lt  noscript gt   lt       gt

[javascript] How to post ASP.NET MVC Ajax form using JavaScript rather than submit button

Examples related to javascript

Examples related to asp.net-mvc

Examples related to asp.net-ajax

Examples related to jquery