Inbound ajax parameters assigned by elements data attribute are undefined-CodePudding

I am having an issue setting my inbound ajax parameters from an elements data attribute. I have a checkbox with data elements site_id and ia_id. The ajax code is used to update the backend table with the state of the checkbox (ie: 1/0 for checked/unchecked).

Here is the relevant code:

Html row with checkbox:

<td  style="text-align:center;">
   <input type="checkbox" id="on-time" data: ia_id="<?php echo $student['ia_id']; ?>" data: site_id="<?php echo $this->session->userdata('site_id'); ?>">
</td>

javascript code for on change event

$('#on-time').on('change', function() {
    var ia_id = $(this).data('ia_id');
    var site_id = $(this).data('site_id');
    var checked = $(this).is(':checked');

    alert('calling ajax, ia_id='   ia_id   ', site_id='   site_id   ', ckbxChecked='   checked);

    $.post("<?php echo base_url('assets/ajax/save_attendance_checks.php');?>", {
      checked: checked,
      ia_id: ia_id,
      site_id: site_id
    }, function(data) {
       alert(data);        
    });
  });

When I click the checkbox, the alert shows all parameters as undefined.

Could someone please assist? Thanks, Dennis

CodePudding user response：

There is a typo in your HTML. change data: ia_id to data-ia_id and data: site_id to data-site_id

" data-site_id="session->userdata('site_id'); ?>">