Getting checkbox value in PHP Form

Question

I've looked about everywhere and I know that the method I'm using should work, as many others have asked this question and it has worked.

However, for myself, it doesn't seem to want to work.

The question: Why does my array only display the last item in the list?

The code:

Form:

<form id="searchglue" method="post" action="<?=base_url();?>index.php/main/search">
    <input type="checkbox" name="colour[]"  id="Amber"                  value="Amber">
    <input type="checkbox" name="colour[]"  id="Beige"                  value="Beige">
    <input type="checkbox" name="colour[]"  id="Black"                  value="Black">
    <input type="checkbox" name="colour[]"  id="Brown"                  value="Brown">
    <input type="checkbox" name="colour[]"  id="Clear"                  value="Clear">
    <input type="checkbox" name="colour[]"  id="Cola"                   value="Cola">
    <input type="checkbox" name="colour[]"  id="Cream"                  value="Cream">
    <input type="checkbox" name="colour[]"  id="Dark Blue"              value="Dark Blue">
    <input type="checkbox" name="colour[]"  id="Dark Green"             value="Dark Green">
    <input type="checkbox" name="colour[]"  id="Glitter Gold"           value="Glitter Gold">
    <input type="checkbox" name="colour[]"  id="Glitter Green"          value="Glitter Green">
    <input type="checkbox" name="colour[]"  id="Glitter Multicoloured"  value="Glitter Multicoloured">
    <input type="checkbox" name="colour[]"  id="Glitter Red"            value="Glitter Red">
    <input type="checkbox" name="colour[]"  id="Glitter Silver"         value="Glitter Silver">
    <input type="checkbox" name="colour[]"  id="Gold"                   value="Gold">
    <input type="checkbox" name="colour[]"  id="Light Blue"             value="Light Blue">
    <input type="checkbox" name="colour[]"  id="Light Brown"            value="Light Brown">
    <input type="checkbox" name="colour[]"  id="Light Green"            value="Light Green">
    <input type="checkbox" name="colour[]"  id="Oak"                    value="Oak">
    <input type="checkbox" name="colour[]"  id="Orange"                 value="Orange">
    <input type="checkbox" name="colour[]"  id="Pale Amber"             value="Pale Amber">
    <input type="checkbox" name="colour[]"  id="Red"                    value="Red">
    <input type="checkbox" name="colour[]"  id="Silver"                 value="Silver">
    <input type="checkbox" name="colour[]"  id="White"                  value="White">
    <input type="checkbox" name="colour[]"  id="Yellow"                 value="Yellow">
</form>

Where it ends up:

foreach($_POST['colour'] as $r):
    echo $r;
endforeach;

I am using ajax to get the results which I THINK is where the error is with getting all the name attributes, but I don't know what to do with it...

So here is the ajax:

$('form#searchglue').on('change', function() {
    var obj = $(this),
    url = obj.attr('action'),
    method = obj.attr('method'),
    data = {};

    obj.find('[name]').each(function(index, value) {
        var obj = $(this),
        name = obj.attr('name'),
        value = obj.val();

        data[name] = value;
    });

    $.ajax({
        url: url,
        type: method,
        data: data,
        cache: false,
        success: function(response) {
            $("#load").html(response);
        }
    });
    return false;
});

No matter what I do, whether I tick something, or have them all unticked completely, the result will always be Yellow (the last one in the input list).

Answer 1

Use serialize() method to get form value

$('form#searchglue').on('change', function() {
    var obj = $(this);
    url = obj.attr('action');
    method = obj.attr('method');

    data =obj.serialize(); 

    $.ajax({
        url: url,
        type: method,
        data: data,
        cache: false,
        success: function(response) {
            $("#load").html(response);
        }
    });
    return false;
});

Documentation : .serialize()