How to prevent page refresh upon form.trigger('submit')?

Question

I have the following code which works well when triggered by the user clicking on the form's submit button:

            // load dashboards when filter form is submitted
            $('div.active form.filter-form').submit(function (e) {
                // get submitted values
                submittedData = $(this).serializeArray();
                getDashboardURL();
                e.preventDefault();
            });

However whenever I try to trigger the form submission in the snippet below, it results in the page refreshing:

            // trigger reload of dashboard
            $('select.filter').change(function () {
                $('select#'+this.id).val($(this).val());

                $('div.active form.filter-form').trigger('submit');

            });

How can I prevent the form submission (triggered by the select change event) from refreshing the page?

Answer 1

You can simply put return false on your markup of form.

<form onsubmit="function(); return false;">

Otherwise changing the button type to "button" instead of "submit" also should work.