Radio button not submitting on change
Radio button not submitting on change
![globalplane](https://secure.gravatar.com/avatar/c3fdb23f8bf711d7aff125dd899e4e1c/?default=https%3A%2F%2Fvanillicon.com%2Fc3fdb23f8bf711d7aff125dd899e4e1c_200.png&rating=g&size=120)
Link to test case: https://comprehensibleinputwiki.com/ciwlibrary/testcase2.php
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
I have three fields. Two selects and one radio. The selects work with the 'change' event listener and fire the submit(), but the radio field does not. And nothing is written to the console. If I change the type
to select
, it works fine and submits on change.
editor = new $.fn.dataTable.Editor( {
ajax: "newvidadmin.php",
table: "#library-table",
formOptions: {
main: {
submit: 'changed'
}
},
fields: [ {
type: "select",
label: "Difficulty:",
name: "difficulty_id"
}, {
type: "select",
label: "Language:",
name: "language_id",
}, {
type: "radio",
label: "Status:",
name: "enabled_id"
}
]
});
editor.field('difficulty_id').input().on('change', function(e, d) {
if (!d) {
editor.submit();
}
});
editor.field('language_id').input().on('change', function(e, d) {
if (!d) {
editor.submit();
}
});
editor.field('enabled_id').input().on('change', function(e, d) {
console.log(e);
console.log(d);
if (!d) {
editor.submit();
}
});
// Initialize table
let table = new DataTable('#library-table', {
dom: 'Plfrtip',
serverSide: true,
ajax: {
url: "newvidadmin.php",
type: "POST"
},
deferRender: true,
"columns": [
{ "data": "vid" },
{ "data": "title" },
{ "data": "channelTitle" },
{ "data": "difficulty" ,
"class": "difficulty editable" ,
"editField": "difficulty_id" },
{ "data": "language_name" ,
"class": "language editable" ,
"editField": "language_id" },
{ "data": "enabled" ,
"class": "enabled editable",
"editField": "enabled_id" },
],
searchPanes: {
cascadePanes: true,
viewTotal: true,
i18n: {
count: '{total}',
countFiltered: '{count} / {total}'
},
},
});
This question has an accepted answers - jump to answer
Answers
What is happening is that:
at the point it is run is not finding any
input
elements has the form hasn't yet loaded the options for that field - i.e. they don't exist yet. That isn't the case with the regular text input elements, since they don't depend on the Ajax loaded data.What to do instead is use a delegated event - e.g.:
Allan
Perfect, works, thanks!