Question

So I have an array that gets created from a php loop that looks like this:

echo '<input type="checkbox" name="types[]" id="types[]" value="' . $id . '"> ' . $type . '<br>';

And while it works just passing it to php, I wanted to do some updates and pass it to ajax
to pass to php so I can have the ajax do a fancy return on the page for me.

I’ve tried all types of ways to get it to pass to the ajax and over to php, but nothing works.

Here is the ajax code:

jQuery(document).ready(function(){

    $('#contactform').submit(function(){

        var action = $(this).attr('action');

        $("#message").slideUp(750,function() {
        $('#message').hide();

        $('#submit')
            .after('<img src="assets/ajax-loader.gif" class="loader" />')
            .attr('disabled','disabled');



        $.post(action, {
            types['types[]']: $('#types').val(),
            form_name: $('#form_name').val(),
            site_id: $('#site_id').val()
        },
            function(data){
                document.getElementById('message').innerHTML = data;
                $('#message').slideDown('slow');
                $('#contactform img.loader').fadeOut('slow',function(){$(this).remove()});
                $('#submit').removeAttr('disabled');
                if(data.match('success') != null) $('#contactform').slideUp('slow');

            }
        );

        });

        return false;

    });

});

Im trying to get this to work as well because the rest of the site uses the same functionality, and I would like to keep this the same way. I wouldn’t want to have to take
out the other ajax stuff on pages already created.

So any insight is greatly appreciated.

Thanks

Edit/Update:

So after setting the line like Meager explained:

echo '<input type="checkbox" name="types[]" class="types" value="' . $id . '"> ' . $type . '<br>';

And adjusting the ajax code to this:

    $.post(action, {
        form_name: $('#form_name').val(),
        site_id: $('#site_id').val(),
        types: $('.types').map(function(){ $(this).val(); });

    },

It just seems to be bypassing the ajax and posting right over to my process.php file with:

Array
(
    [types] => Array
        (
            [0] => 20
            [1] => 21
            [2] => 22
        )

    [site_id] => 112
    [form_name] => prd_svc
    [Submit] => Submit
)

==========================================

jQuery(document).ready(function(){

$('#contactform').submit(function(){

    var action = $(this).attr('action');

    $("#message").slideUp(750,function() {
    $('#message').hide();

    $('#submit')
        .after('<img src="assets/ajax-loader.gif" class="loader" />')
        .attr('disabled','disabled');



    $.post(action, {
        form_name: $('#form_name').val(),
        site_id: $('#site_id').val(),
        types: $('.types').map(function(){ $(this).val(); });

    },
        function(data){
            $('#message').html(data);
            $('#message').slideDown('slow');
            $('#contactform img.loader').fadeOut('slow',function(){$(this).remove()});
            $('#submit').removeAttr('disabled');
            if(data.match('success') != null) $('#contactform').slideUp('slow');

        }
    );

    });

    return false;

});

});

Answer 1

Your attempt to create an “array” of elements via this: id="types[]" is wrong. You can’t group elements this way, and if you could, this still wouldn’t return an array of values: $('#types').val().

You’ll have to assign each element a unique ID, or give them all a shared class and select by that:

echo '<input type="checkbox" name="types[]" class="types" value="' . $id . '"> ' . $type . '<br>';

Then, to turn an set of elements selected into their values, you can use map:

// Collect all values
$('.types').map(function () { $(this).val(); });