Checkbox submit javascript

Question

I have a submit button with an id of brands_by_category_change_name_btn that when clicked runs the below JS. The issue is that I am getting the same response Object {id: 2, cat_id: 1, state: "0"} no matter if my checkboxes are checked or unchecked.

Checkbox Code

<input type="checkbox" name="product_category" class="product_category_selector" id="product_category_<?php echo $assoc_cat['id']; ?>" data-id="<?php echo $assoc_cat['id']; ?>" <?php echo $checked_state; ?> /> <?php echo $assoc_cat['name']; ?><br />

Using javascript how can I add all of my checked checkbox options into my cat_id variable for processing?

JS

    $('body').on("click", "#brands_by_category_change_name_btn", function (e) {
        e.preventDefault();               
        var self = $(this);
        var id = $("#manID").data("id");
        var cat_id = $(".product_category_selector").data("id");
        var url = $("#manufacturers_table").data("infourl");
        var state = "0";
        if ( self.is(":checked") ) {
           state = "1";
        }
        var data_array = { 
           id : id, 
           cat_id : cat_id, 
           state : state
        };
        console.log( data_array );
        //ajaxCall(url, data_array, null, "reload_selected_product_categories");
   });

Can u produce the demo fiddle to understand a little bit more? — Gourav
– Gourav, Commented Sep 20, 2013 at 1:48
@gourav This is what the HTML looks like - The checked:checked option is coded from the db but is not applicable for my issue - d.pr/i/S9g4 — Jess McKenzie
– Jess McKenzie, Commented Sep 20, 2013 at 1:51
You want to collect the data or the value of the checked boxes only rite? — Gourav
– Gourav, Commented Sep 20, 2013 at 1:53

Dart · Accepted Answer · 2013-09-20 04:39:58Z

3

All checked data-ids in cat_id attribute: http://jsfiddle.net/NVQHK/2/

HTML

<ul>
    <li><input type="checkbox" value="product_category_1" data-id="1" />Tractors</li>
    <li><input type="checkbox" value="product_category_2" data-id="2" />Ride Ons</li>
    <li><input type="checkbox" value="product_category_3" data-id="3" />Machinery</li>
    <li><input type="checkbox" value="product_category_4" data-id="4" />Outdoor equipment</li>
</ul>

<input type="button" id="btn" value="Grab data" />
<div id="result"></div>

Javascript

window.onload = function(){
    document.getElementById('btn').addEventListener('click', function(){
        console.log(grabData(true));
        document.getElementById('result').innerText = JSON.stringify(grabData(true));
    });
}

function grabData(checked){
    checked = typeof(checked) == 'undefined' ? false : checked
    var items = document.getElementsByTagName('input');
    var data  = [];

    for(var i = 0; i < items.length; i++){
        if(items[i].type != 'checkbox' || items[i].checked != checked){
             continue;
        }

        data.push(items[i].getAttribute('data-id'));
    }

    var item = {
        id: 2,
        cat_id: data,
        state: checked + 0
    };

    return item;
}

Array of objects http://jsfiddle.net/NVQHK/3/

HTML

<ul>
    <li><input type="checkbox" value="product_category_1" data-id="1" />Tractors</li>
    <li><input type="checkbox" value="product_category_2" data-id="2" />Ride Ons</li>
    <li><input type="checkbox" value="product_category_3" data-id="3" />Machinery</li>
    <li><input type="checkbox" value="product_category_4" data-id="4" />Outdoor equipment</li>
</ul>

<input type="button" id="btn" value="Grab data" />
<div id="result"></div>

Javascript

    window.onload = function(){
    document.getElementById('btn').addEventListener('click', function(){
        console.log(grabData());
        document.getElementById('result').innerText = JSON.stringify(grabData(true));
    });
}

function grabData(checked){
    checked = typeof(checked) == 'undefined' ? false : checked;
    var items = document.getElementsByTagName('input');
    var data  = [];

    for(var i = 0; i < items.length; i++){
        if(items[i].type != 'checkbox' || items[i].checked != checked){
             continue;
        }

        var item = {
            id: items[i].getAttribute('data-id'),
            cat_id: items[i].value,
            state: items[i].checked + 0
        };

        data.push(item);
    }

    return data;
}

answered Sep 20, 2013 at 4:39

Dart

7871 gold badge7 silver badges17 bronze badges

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

7 Comments

Jess McKenzie Over a year ago

Thanks, I am still confused on how I would implement it into my current function

Jess McKenzie Over a year ago

By implementing I mean - All checked data-ids in cat_id attribute

Dart Over a year ago

change selectors, e.g. document.getElementsByTagName('input'); -> document.getElementByClassName('product_category_selector')

Jess McKenzie Over a year ago

Thanks Dart - I have this gist.github.com/jzmwebdevelopment/6ce822577fff088dea61 but its still showing 'cat_id: undefined'

Jess McKenzie Over a year ago

I have done return items; but I am unsure how to get id:id - This is different to the checkbox ID

|

Collectives™ on Stack Overflow

Checkbox submit javascript

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related