Ajax - input submit vs onchange = this.submit.form()

Im working on a series of dropdown lists that populate other dropdown lists based on the selected value. Originally I had it so that the form would auto submit if the value was changed but the entire page was getting refreshed instead of just refreshing the drop down. After exhausting all other solutions I ended up removing the onchange = this.submit.form() and just added an input submit button and I got the desired results. Here are the two solutions:

Solution #1 - Refreshes entire page

@using (Ajax.BeginForm("BySite", "Building", new AjaxOptions
                    {
                        UpdateTargetId = "buildingDropDown",
                        InsertionMode = InsertionMode.Replace,
                        HttpMethod = "GET"
                    }))
{
    @Html.DropDownList("SiteID", null, new { onchange = "this.form.submit()" })
}

<div id="buildingDropDown"></div>

Solution #2 - Adds dropdown to current page (expected) 

@using (Ajax.BeginForm("BySite", "Building", new AjaxOptions
                    {
                        UpdateTargetId = "buildingDropDown",
                        InsertionMode = InsertionMode.Replace,
                        HttpMethod = "GET"
                    }))
{
    @Html.DropDownList("SiteID")
    <input type="submit" value="Go" name="submit" />
}

<div id="buildingDropDown"></div>

Is there a different way to submit the form onchange that doesn't refresh the entire page?

Re: Ajax - input submit vs onchange = this.submit.form()

Hello

You may try onsubmit handler in place of submit call

onchange = "this.form.onsubmit()"

Re: Ajax - input submit vs onchange = this.submit.form()

I was able to get it working as desired with the following code:

<script type="text/jscript">
    $(document).ready(function () {
        $('#SiteID').change(function () {
            $('#SiteID').closest("form").submit();
        });
    });
</script>