Post array of multiple checkbox values
Solution 1
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;
});
Solution 2
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;
});
Solution 3
var checkeditems = $('input:checkbox[name="review[]"]:checked')
.map(function() { return $(this).val() })
.get()
.join(",");
$.ajax({
type: "POST",
url: "/index.php/openItems/",
data: "ids=" + checkeditems,
success: function(msg) { $(".mainContainer").html(msg); }
});
Related videos on Youtube
jjclarkson
I’m just an average guy with a way above average interest in computer programming, gadgets, and all things hackable. I program for work, I program for fun, and I’m learning more about electronics all the time. I’ll be the first to tell you when I don’t know something, but I might ask a lot of questions. Above all, I’m in it for the thrill of doing something new and exciting. Please feel free to ask me any questions, I love to help.
Updated on May 30, 2020Comments
-
jjclarkson almost 4 years
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).
-
O.OA bit out of topic, the label's
for
value should be the input id, not the input value.
-
-
jjclarkson over 14 yearsIs it more efficient to use .map()?
-
karim79 over 14 years@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.