AJAX behaving differently for Submit button vs. this.form.submit?

Question

I'm trying to auto-save a selection in a dropdown (ASP.NET, MVC, VB), but it's not behaving as expected. Here's the dummy action in the controller:

<AcceptVerbs(HttpVerbs.Post)> _
Function TestAction(ByVal id As Integer) As ActionResult
    Return Content(id)
End Function

and the HTML:

<script type="text/javascript" src='<%= Url.Content("~/Scripts/MicrosoftAjax.debug.js") %>'></script>
<script type="text/javascript" src='<%= Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js") %>'></script>

<% Using Ajax.BeginForm("TestAction", New AjaxOptions With {.UpdateTargetId = "test"})%>
<%=Html.Hidden("id", 123)%>
<%=Html.DropDownList("actions", Nothing, New With {.onchange = "this.form.submit();"})%>
<input type="submit" value="Submit" />
<span id="test"></span>
<% End Using%>

The Submit button works as expected - the span is populated with "123". The dropdown on the other hand opens a new page with nothing but "123" on it. Why "this.form.submit()" not doing the same thing as the Submit button? Is there a different call I should make to emulate the Submit button?

Answer 1

this.form.submit does not run the form.onsubmit event. Pressing the submit button, on the other hand, does. That, combined with the HTML that Ajax.BeginForm generates, explains why the two behave differently. As for how to make your event do the same thing as pressing the submit button, look at the HTML in the linked article:

Sys.Mvc.AsyncForm.handleSubmit(
         this,
         new Sys.UI.DomEvent(event),
         { 
             insertionMode: Sys.Mvc.InsertionMode.replace,
             updateTargetId: 'test' 
         });