Send post request after reset button is clicked

Question

I have button on my page

<button type="reset" class="abort-selection">Clear</button>

When i click it all field and checkboxes reseting to default. Thats ok.

Now I want to send post request after this button is clicked. I do this on existing send Post function

<script>


$(function() {

$('div.list input[type=checkbox]').on('change',onValueChange);     
$('div.selector select').on('change', onValueChange);
$('button[type=reset]').on('click', onValueChange);

function onValueChange() {

        var Checked = {};
        var Selected = {};
    // Hold all checkboxes
        $('div.list input[type=checkbox]:checked').each(function () {
            var $el = $(this);
            var name = $el.attr('name');
            if (typeof (Checked[name]) === 'undefined') {
                Checked[name] = [];
            }
            Checked[name].push($el.val());
        });
    // Hold all dropdowns
        $('div.list select').each(function () {

            var $el = $(this);
            var name = $el.attr('name');

                if (!!$el.val()) {
                    Selected[name] = $el.val();
                }
        });

// Put all together to POST 
    $.ajax({
        url: '/Search.asp',
        type: 'POST',
        data: $.param(Selected) + "&" + $.param(Checked),
        dataType: 'text',
        success: function (data) {
            $("#ExSearchForm").html(data)
                .find('div.list input[type=checkbox],div.selector select').each(function () {
                    var $el = $(this);
                    var name = $el.attr('name');
                    var value = $el.attr('value');

                    if (Checked[name] && Checked[name].indexOf(value) !== -1 ) {
                        $el.prop('checked', true);
                    }
                    if (Selected[name]) {
                        $el.val(Selected[name]);
                    }
                });
        }
    });
};
});
</script>

In this way reset not working, seem like onValueChange function prevent reseting and do own function.

So how to reset and after send this Post request with reseted checkboxes and dropdowns?

Answer 1

if your form is submitting this will work

Put $('#form-id').reset(); end of the ajax success function
Replace " #form-id " with your form id

$.ajax({
        url: '/Search.asp',
        type: 'POST',
        data: $.param(Selected) + "&" + $.param(Checked),
        dataType: 'text',
        success: function (data) {
            $("#ExSearchForm").html(data)
                .find('div.list input[type=checkbox],div.selector select').each(function () {
                    var $el = $(this);
                    var name = $el.attr('name');
                    var value = $el.attr('value');

                    if (Checked[name] && Checked[name].indexOf(value) !== -1 ) {
                        $el.prop('checked', true);
                    }
                    if (Selected[name]) {
                        $el.val(Selected[name]);
                    }
                });
             $('#form-id').reset();
        }
    });

Try put these codes

//this will reset your checkboxes
$('div.list input[type=checkbox]').removeAttr('checked');
//this will reset your select box
$('div.selector select option').removeAttr('selected');