Looping through dynamically generated checkboxes to get values

Question

I have a list of categories for products on my site and am trying to allow products to be listed under multiple categories.

When creating a product there is a list of categories with checkboxes generated from PHP like so:

$sql = "SELECT * FROM categories";
$stmt = DB::run($sql);
$categoryCount = $stmt->rowCount();
if ($categoryCount > 0) {
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
        $id = $row["id"];
        $category_name = $row["category"];
        $category_checkboxes .= "<input type='checkbox' value='$id' name='cat_$id' id='cat_$id'> $category_name<br />";
    }
}

I created a hidden input to determine the amount of available categories

<input type="hidden" name="cat_count" id="cat_count" value="<?php echo $categoryCount; ?>">

I am then trying to loop through these in JS to get which ones were selected to send via AJAX to my parsing script to add to the DB.

var categories;
var cat_count = document.getElementById("cat_count").value;
var i;
for(i=1; i<=cat_count; i++){
    var cat_id = 'cat_'+i;
    var cat = document.getElementById(''+cat_id+'').value;
    categories += cat+',';
}

I have two issues with this:

First a category can be deleted so although there might be 3 categories these could have ID's like '1,3,5'. So my checkboxes will have these ID's but the JS is looking for '1,2,3' and it obviously gets an error when it is trying to get the value of a NULL element.

Second, if it can get the values, it will get all of the values of all checkboxes not just the ones that are checked which is what I need. Although if I get a way to loop through the ID's correctly this shouldn't be too difficult to but in a if checked condition.

Any suggestions or assistance with this would be greatly appreciated.

Stop fixating on IDs as “the” way to select elements (as newbies often tend to do), and use a common class instead. Select all elements with that class, then you don’t need to store the info how many you got any more in the first place, but can just use the length property of the node list that getElementsByClassName returned. — C3roe
– C3roe, Commented May 11, 2018 at 13:08

Tnc Andrei · Accepted Answer · 2018-05-11 13:18:09Z

1

Here is a cleaner way to do this. You don't need cat_count; Add a class to your checkboxes, select all of them, get their value and append it to the categories variable; Working fiddle

var categories = "";
var checkboxes = Array.from(document.getElementsByClassName("checkbox"));
checkboxes.forEach(function(element, index) {
    categories += element.value;
});

answered May 11, 2018 at 13:18

Tnc Andrei

1,11210 silver badges16 bronze badges

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

Comments

brk · Accepted Answer · 2018-05-11 13:16:14Z

0

Id need to be unique so this line var cat_count = document.getElementById("cat_count").value; will always return a single element.

Change it by adding index to it

Instead of Id you can use name with

document.getElementsByName("'cat_$id'")

answered May 11, 2018 at 13:16

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Paddy Hallihan · Accepted Answer · 2018-05-11 13:38:55Z

0

Thanks to @CBroe for getting there first, that worked for me.

var categories = '';
var category = document.getElementsByClassName("product_category");
var i;
for(i=0; i<category.length; i++){
    if(category[i].checked == true){
        var category_value = category[i].value;
        categories += category_value+',';
    }
}

answered May 11, 2018 at 13:38

Paddy Hallihan

1,7245 gold badges35 silver badges92 bronze badges

Collectives™ on Stack Overflow

Looping through dynamically generated checkboxes to get values

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related