javascript - 单击重置按钮后发送发布请求

Question

我的页面上有按钮

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

当我单击它时，所有字段和复选框都会重置为默认值。没关系。

现在我想在单击此按钮后发送发布请求。我在现有的发送帖子功能上执行此操作

<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>

这样重置不起作用，看起来像onValueChange函数阻止重置并执行自己的功能。

那么如何重置并在发送此 Post 请求后重置复选框和下拉列表呢？

Answer 1

如果您的表单正在提交，这将起作用

将$('#form-id').reset();放在ajax成功函数末尾
将“#form-id ”替换为您的表单 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();
        }
    });

尝试输入这些代码

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