Send in one ajax POSt checked checkboxes with selected dropdowns

Question

Checked checkboxes we decided to hold with this code

$('.list input[type=checkbox]').on('change', function () {
    var favorite = {};

    $('.list input[type=checkbox]:checked').each(function () {
        var $el = $(this);
        var name = $el.attr('name');
        if (typeof (favorite[name]) === 'undefined') {
            favorite[name] = [];
        }
        favorite[name].push($el.val());
    });

    $.ajax({
        url: '/Search.asp',
        type: 'POST',
        data: $.param(favorite),
        dataType: 'text',
        success: function (data) {
            $("#ExSearchForm").html(data)
                .find('input[type=checkbox]').each(function () {
                    var $el = $(this);
                    var name = $el.attr('name');
                    var value = $el.attr('value')
                    if (favorite[name] && favorite[name].indexOf(value) !== -1) {
                        $el.prop('checked', true);
                    }
                });
        }
    });
});

Now we need also hold dropdowns values something like that

$('.list Select[option]').on('change', function () {
    var favorite = {};

    $('.list Select[option]:selected').each(function () {
        var $el = $(this);
        var name = $el.attr('name');
        if (typeof (favorite[name]) === 'undefined') {
            favorite[name] = [];
        }
        favorite[name].push($el.val());
    });

    $.ajax({
        url: '/Search.asp',
        type: 'POST',
        data: $.param(favorite),
        dataType: 'text',
        success: function (data) {
            $("#ExSearchForm").html(data)
                .find('Select[option]').each(function () {
                    var $el = $(this);
                    var name = $el.attr('name');
                    var value = $el.attr('value')
                    if (favorite[name] && favorite[name].indexOf(value) !== -1) {
                        $el.prop('selected', true);
                    }
                });
        }
    });
});

can it be combined to one ajax post?

Ankit Chaudhary · Accepted Answer · 2015-06-10 14:25:04Z

1

Yes can be achieved by using a common function onValueChange and attaching it as a listener for change event of both checkbox and dropdown:

function onValueChange() {
    var favorite = {};

    $('.list input[type=checkbox]:checked').each(function () {
        var $el = $(this);
        var name = $el.attr('name');
        if (typeof (favorite[name]) === 'undefined') {
            favorite[name] = [];
        }
        favorite[name].push($el.val());
    });
 $('.list Select[option]:selected').each(function () {
        var $el = $(this);
        var name = $el.attr('name');
        if (typeof (favorite[name]) === 'undefined') {
            favorite[name] = [];
        }
        favorite[name].push($el.val());
    });

    $.ajax({
        url: '/Search.asp',
        type: 'POST',
        data: $.param(favorite),
        dataType: 'text',
        success: function (data) {
            $("#ExSearchForm").html(data)
                .find('input[type=checkbox]').each(function () {
                    var $el = $(this);
                    var name = $el.attr('name');
                    var value = $el.attr('value')
                    if (favorite[name] && favorite[name].indexOf(value) !== -1) {
                        $el.prop('checked', true);
                    }
                });
            $("#ExSearchForm").html(data)
                .find('Select[option]').each(function () {
                    var $el = $(this);
                    var name = $el.attr('name');
                    var value = $el.attr('value')
                    if (favorite[name] && favorite[name].indexOf(value) !== -1) {
                        $el.prop('selected', true);
                    }
                });
        }
    });
};
$('.list input[type=checkbox]').on('change',onValueChange);     
$('.list Select[option]').on('change', onValueChange);

answered Jun 10, 2015 at 14:25

Ankit Chaudhary

4,1092 gold badges15 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dmitrij Holkin Over a year ago

Uncaught SyntaxError: Unexpected token .

Ankit Chaudhary Over a year ago

could you tell what response you are getting in data

Collectives™ on Stack Overflow

Send in one ajax POSt checked checkboxes with selected dropdowns

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related