Input Checkbox + DataTables + Jquery sometimes returns "on" instead of input value

Question

I am having a bug in production environment and cannot reproduce it in dev environment, so I thinks it's a matter of browsers.

I have a DataTable filled up by server side proccessing and a custom column that is a checkbox, here's the simplified code:

$("#data-table").DataTable({        
    "serverSide" : true,
    "ajax" : {
        "url" : "/list",
        "dataSrc" : "data"
    },
    "columns" : [{
            "data" : function(row) {
                return '<input class="id-checkbox" type="checkbox" name="ids[]" value="' + row.id + '">';
            },
            "class" : "text-center",
            "orderable" : false
        },{
            "data" : "name",
            "class" : "text-center",
            "orderable" : false
        }]
    });

Then I have some jQuery code than whenever a button is clicked, then get the selected items and post it to the backend server:

$("#button").on("click", function(){

    var ids = [];

    $('input[type=checkbox]:checked').each(function() {
        ids.push(this.value);
    });

    if (ids.length == 0) {
        //POST Ajax request to server
    }
});

The thing is that sometimes the ids array is being filled with some ids, and some "on" word, so then my backend explodes as is waiting for an array of Long. Here's an example stacktrace:

Failed to convert value of type 'java.lang.String' to required type 'java.lang.Long[]'; 
nested exception is java.lang.NumberFormatException: 
For input string: "109287,109286,109273,108820,on,on"

Does anyone have an idea of what's going on?

It might have to do with input[type=checkbox]:checked as it is not unique and you could be getting a checkbox not related to what you need. — thekodester
– thekodester, Commented Jan 31, 2017 at 13:40
You could try input[name^=ids]:checked I believe that should work to make it more specific — thekodester
– thekodester, Commented Jan 31, 2017 at 13:42
I guess as last resort if possible you could return a checkbox and hidden input (the hidden input would contain your value) you could give both the input and checkbox same id (to make it easier to get the correct input). — thekodester
– thekodester, Commented Jan 31, 2017 at 13:54

Matvey Andreyev · Accepted Answer · 2017-01-31 13:47:03Z

1

"on" will be the value of a checkbox which has no value attribute:

<input id="i" type="checkbox">

If you log a value of this input, you will get "on" at least in Firefox:

console.log(document.getElementById('i').value);

Check what HTML is generated by your script. Maybe, some checkboxes miss value attributes. Maybe, because the row.id is sometimes not present, as an idea.

answered Jan 31, 2017 at 13:47

Matvey Andreyev

1,05610 silver badges22 bronze badges

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

1 Comment

Fernando Fradegrada Over a year ago

Yeah, understand that, but as is the id of created entity, it's always present. At least in the model. I cannot reproduce if DataTable is returning sometimes no data.

Fernando Fradegrada · Accepted Answer · 2017-02-01 17:35:44Z

0

As @kodecount had commented, the problem was the presence of another input checkbox on the same page, solved by adding

input[name^=ids]:checked

answered Feb 1, 2017 at 17:35

Fernando Fradegrada

9931 gold badge9 silver badges28 bronze badges

Collectives™ on Stack Overflow

Input Checkbox + DataTables + Jquery sometimes returns "on" instead of input value

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related