up vote 0 down vote favorite

Why is only one value of the "db" checkbox values array being sent to the server side script?

JQUERY:

$(".db").live("change", function() {
    $(this).add($(this).next("label")).add($(this).next().next("br")).remove().insertAfter(".db:last + label + br"); 
    var url = "myurl.php";
    var db = [];
    $.each($('.db:checked'), function() {
    	db.push($(this).val()); 
    });
    if(db.length == 0) { 
    	db = "none"; 
    }       
    $.post(url, {db: db}, function(response) {
    	$("#dbdisplay").html(response); 
    });
    return true;
});

HTML:

<input type="checkbox" name="db[]" class="db" value="track"/><label for="track">track</label></br>
<input type="checkbox" name="db[]" class="db" value="gps"/><label for="gps">gps</label></br>
<input type="checkbox" name="db[]" class="db" value="accounting"/><label for="accounting">accounting</label></br>

Edit: I ended up answering my own question, but does anyone have documentation (or an explanation) of why this is necessary? It was difficult for me to find the exact answer (thus the posthumous post).

flag
94% accept rate

3 Answers

up vote 1 down vote accepted

I agree with @jjclarkson. Just to add, instead of pushing your ids to an array, you can use $.map:

$(".db").live("change", function() {
    $(this).add($(this).next("label")).add($(this).next().next("br")).remove().insertAfter(".db:last + label + br"); 
    var url = "myurl.php";

    var db = $('.db:checked').map(function(i,n) {
        return $(n).val();
    }).get(); //get converts it to an array

    if(db.length == 0) { 
        db = "none"; 
    }       
    $.post(url, {'db[]': db}, function(response) {
        $("#dbdisplay").html(response); 
    });
    return true;
});
link|flag
Is it more efficient to use .map()? – jjclarkson Oct 12 '09 at 22:38
@jjclarkson - not sure, but it's shorter and more sightly. That said, I had been using the $.each approach until I discovered $.map, I haven't noticed any difference, but generally, I don't think one will notice any difference for a small to medium sized data set. – karim79 Oct 12 '09 at 22:47
up vote 0 down vote

You need to have the square brackets to specify an array [] on the submitted variable name.

{'db[]': db}

$(".db").live("change", function() {
    $(this).add($(this).next("label")).add($(this).next().next("br")).remove().insertAfter(".db:last + label + br"); 
    var url = "myurl.php";
    var db = [];
    $.each($('.db:checked'), function() {
    	db.push($(this).val()); 
    });
    if(db.length == 0) { 
    	db = "none"; 
    }       
    $.post(url, {'db[]': db}, function(response) {
    	$("#dbdisplay").html(response); 
    });
    return true;
});
link|flag
up vote 0 down vote

$('input[name="mycheckboxes"]:checked').map(function(){ return $(this).val(); }).get().join(",");

then explode in PHP $mycheckboxes = explode(',',$_GET['mycheckboxes']);

link|flag

Your Answer

get an OpenID
or
never shown

Not the answer you're looking for? Browse other questions tagged or ask your own question.